https://wiki.kuke.ink/api.php?action=feedcontributions&feedformat=atom&user=Kuke 2026-08-20T13:23:43Z 用户贡献 MediaWiki 1.46.0 https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=239 2026-08-20T13:12:42Z

<p>Kuke：​页面切换过渡：跨文档视图过渡</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> /* 主导航 active 态：由 body class 驱动（服务端直出，无 JS 依赖） */<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;],<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;],<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;],<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;],<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;],<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;],<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:visited,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:visited,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:visited,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:visited,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:visited,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]::after,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]::after,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]::after,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]::after,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]::after,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:hover,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:hover,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:hover,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:hover,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:hover,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:hover,<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:focus,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:focus,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:focus,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:focus,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:focus,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav__link::after,<br /> .citizen-header-position-right .kuke-nav__link::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }<br /> /* --------------------------------------------------------------------------<br /> 25. 页面切换过渡<br /> 以前点链接是硬切：旧页面整屏瞬间消失、新页面瞬间顶上来，中间那一下很跳。<br /> 这里用浏览器原生的跨文档视图过渡（View Transitions），让新旧两页交叉淡接。<br /> 整个过程跑在合成器线程上，不占主线程，也不加任何脚本或额外 DOM。<br /> 不支持的浏览器会照旧直接切换，没有副作用，也不需要降级代码。<br /> -------------------------------------------------------------------------- */<br /> <br /> @view-transition {<br /> navigation: auto;<br /> }<br /> <br /> /* 默认 0.25s 用在整屏交叉淡接上略显拖沓，收紧一点，切换才跟手 */<br /> ::view-transition-group( root ) {<br /> animation-duration: 0.22s;<br /> animation-timing-function: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> }<br /> <br /> /* 系统开了「减少动态效果」就退回直接切换 */<br /> @media ( prefers-reduced-motion: reduce ) {<br /> @view-transition {<br /> navigation: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Common.js&diff=238 2026-08-20T13:08:35Z

<p>Kuke：​移除加载动画，回滚到加入前的版本</p> <hr /> <div>/* 横版登录 / 注册弹窗。<br /> 表单在本地直接渲染（不再抓取 Special 页面的 HTML），提交走 Action API<br /> clientlogin / createaccount，token 在页面加载时就后台预取，<br /> 因此弹窗打开即可用，没有等待。<br /> 独立页面 Special:UserLogin / Special:CreateAccount 保留，无 JS 时仍可用。 */<br /> ( function () {<br /> 'use strict';<br /> <br /> var LOGO = 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png';<br /> <br /> var MODES = {<br /> login: {<br /> page: 'Special:UserLogin',<br /> tab: '登录',<br /> title: '登录到 Kuke Wiki',<br /> sub: '登录后即可编辑条目、参与讨论并同步个人偏好设置。',<br /> submit: '登录',<br /> busy: '正在登录…'<br /> },<br /> signup: {<br /> page: 'Special:CreateAccount',<br /> tab: '注册',<br /> title: '创建账号',<br /> sub: '加入 KukeMC 官方百科的编辑与维护，只需一分钟。',<br /> submit: '创建账号',<br /> busy: '正在创建…'<br /> }<br /> };<br /> <br /> var FIELDS = {<br /> login: [<br /> { name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },<br /> { name: 'password', label: '密码', type: 'password', autocomplete: 'current-password', required: true },<br /> { name: 'rememberMe', label: '在此浏览器上保持登录', type: 'checkbox' }<br /> ],<br /> signup: [<br /> { name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },<br /> { name: 'password', label: '密码', type: 'password', autocomplete: 'new-password', required: true },<br /> { name: 'retype', label: '确认密码', type: 'password', autocomplete: 'new-password', required: true },<br /> { name: 'email', label: '电子邮件', type: 'email', autocomplete: 'email', hint: '选填，用于找回密码' },<br /> { name: 'captchaWord', label: '验证码', type: 'captcha', required: true }<br /> ]<br /> };<br /> <br /> var POINTS = [<br /> { icon: 'pencil', text: '编辑与创建条目，完善服务器资料' },<br /> { icon: 'chat', text: '参与讨论页，与其他编辑者协作' },<br /> { icon: 'star', text: '保存个人偏好、监视列表与编辑历史' },<br /> { icon: 'clock', text: '追踪最近更改，第一时间了解更新' }<br /> ];<br /> <br /> var ICONS = {<br /> pencil: 'M13.5 2.5a2.12 2.12 0 0 1 3 3L7 15l-4 1 1-4Z',<br /> chat: 'M3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v7a1.5 1.5 0 0 1-1.5 1.5H8l-4 3v-3h-.5A1.5 1.5 0 0 1 3 12.5Z',<br /> star: 'm10 2.6 2.3 4.66 5.15.75-3.72 3.63.88 5.12L10 14.34l-4.6 2.42.87-5.12L2.55 8l5.15-.75Z',<br /> clock: 'M10 2.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Zm0 3.6v4.2l3 1.8',<br /> close: 'M5 5l10 10M15 5L5 15',<br /> eye: 'M1.8 10S4.9 4.7 10 4.7 18.2 10 18.2 10 15.1 15.3 10 15.3 1.8 10 1.8 10Zm8.2 2.2a2.2 2.2 0 1 0 0-4.4 2.2 2.2 0 0 0 0 4.4Z',<br /> eyeOff: 'M3 3l14 14M8.2 8.3A2.2 2.2 0 0 0 10 12.2c.6 0 1.1-.2 1.6-.6M6.1 6.2C3.6 7.6 1.8 10 1.8 10s3.1 5.3 8.2 5.3c1.4 0 2.6-.4 3.7-1M15.5 13C17.3 11.8 18.2 10 18.2 10S15.1 4.7 10 4.7c-.7 0-1.4.1-2 .3',<br /> alert: 'M10 6.6v4.2m0 2.6h.01M8.6 3.2 2.2 14.4A1.6 1.6 0 0 0 3.6 16.8h12.8a1.6 1.6 0 0 0 1.4-2.4L11.4 3.2a1.6 1.6 0 0 0-2.8 0Z'<br /> };<br /> <br /> var root = null;<br /> var main = null;<br /> var body = null;<br /> var titleEl = null;<br /> var subEl = null;<br /> var alertEl = null;<br /> var lastFocus = null;<br /> var current = null;<br /> var api = null;<br /> var apiReady = null;<br /> var tokens = {};<br /> var captcha = null;<br /> var submitting = false;<br /> <br /> function svg( d, cls, size ) {<br /> var s = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );<br /> s.setAttribute( 'viewBox', '0 0 20 20' );<br /> s.setAttribute( 'width', size || '18' );<br /> s.setAttribute( 'height', size || '18' );<br /> s.setAttribute( 'aria-hidden', 'true' );<br /> s.setAttribute( 'fill', 'none' );<br /> s.setAttribute( 'stroke', 'currentColor' );<br /> s.setAttribute( 'stroke-width', '1.6' );<br /> s.setAttribute( 'stroke-linecap', 'round' );<br /> s.setAttribute( 'stroke-linejoin', 'round' );<br /> if ( cls ) {<br /> s.setAttribute( 'class', cls );<br /> }<br /> var p = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );<br /> p.setAttribute( 'd', d );<br /> s.appendChild( p );<br /> return s;<br /> }<br /> <br /> function el( tag, cls, text ) {<br /> var n = document.createElement( tag );<br /> if ( cls ) {<br /> n.className = cls;<br /> }<br /> if ( text ) {<br /> n.textContent = text;<br /> }<br /> return n;<br /> }<br /> <br /> function returnTarget() {<br /> var page = mw.config.get( 'wgPageName' );<br /> if ( /^Special:(UserLogin|CreateAccount|UserLogout)$/i.test( page ) ) {<br /> return mw.config.get( 'wgMainPageTitle' ) || '首页';<br /> }<br /> return page;<br /> }<br /> <br /> function returnUrl() {<br /> return location.origin + mw.util.getUrl( returnTarget() );<br /> }<br /> <br /> /* ---------- API ---------- */<br /> <br /> function ready() {<br /> if ( !apiReady ) {<br /> apiReady = mw.loader.using( [ 'mediawiki.api', 'mediawiki.util' ] ).then( function () {<br /> api = new mw.Api();<br /> return api;<br /> } );<br /> }<br /> return apiReady;<br /> }<br /> <br /> function token( type ) {<br /> if ( tokens[ type ] ) {<br /> return tokens[ type ];<br /> }<br /> tokens[ type ] = ready().then( function () {<br /> return api.get( {<br /> action: 'query',<br /> meta: 'tokens',<br /> type: type,<br /> formatversion: 2<br /> } );<br /> } ).then( function ( d ) {<br /> return d.query.tokens[ type + 'token' ];<br /> } );<br /> return tokens[ type ];<br /> }<br /> <br /> /* QuestyCaptcha 的题面与 id，每次进入注册态重新取（旧 id 会失效） */<br /> function loadCaptcha() {<br /> return ready().then( function () {<br /> return api.get( {<br /> action: 'query',<br /> meta: 'authmanagerinfo',<br /> amirequestsfor: 'create',<br /> formatversion: 2<br /> } );<br /> } ).then( function ( d ) {<br /> var reqs = ( d.query &amp;&amp; d.query.authmanagerinfo &amp;&amp; d.query.authmanagerinfo.requests ) || [];<br /> var hit = null;<br /> reqs.forEach( function ( r ) {<br /> if ( r.id &amp;&amp; r.id.indexOf( 'Captcha' ) !== -1 &amp;&amp; r.fields &amp;&amp; r.fields.captchaId ) {<br /> hit = r;<br /> }<br /> } );<br /> if ( !hit ) {<br /> return null;<br /> }<br /> return {<br /> id: hit.fields.captchaId.value,<br /> question: hit.fields.captchaInfo ? hit.fields.captchaInfo.value : '',<br /> label: ( hit.fields.captchaWord &amp;&amp; hit.fields.captchaWord.label ) || '验证码'<br /> };<br /> } ).catch( function () {<br /> return null;<br /> } );<br /> }<br /> <br /> /* ---------- 结构 ---------- */<br /> <br /> function build() {<br /> root = el( 'div', 'kuke-auth' );<br /> root.hidden = true;<br /> <br /> var backdrop = el( 'div', 'kuke-auth__backdrop' );<br /> backdrop.addEventListener( 'click', close );<br /> root.appendChild( backdrop );<br /> <br /> var dialog = el( 'div', 'kuke-auth__dialog' );<br /> dialog.setAttribute( 'role', 'dialog' );<br /> dialog.setAttribute( 'aria-modal', 'true' );<br /> dialog.setAttribute( 'aria-labelledby', 'kuke-auth-title' );<br /> <br /> var closeBtn = el( 'button', 'kuke-auth__close' );<br /> closeBtn.type = 'button';<br /> closeBtn.setAttribute( 'aria-label', '关闭' );<br /> closeBtn.appendChild( svg( ICONS.close ) );<br /> closeBtn.addEventListener( 'click', close );<br /> dialog.appendChild( closeBtn );<br /> <br /> // 左：品牌栏<br /> var aside = el( 'aside', 'kuke-auth__aside' );<br /> var logo = el( 'img', 'kuke-auth__logo' );<br /> logo.src = LOGO;<br /> logo.alt = '';<br /> logo.width = 44;<br /> logo.height = 44;<br /> aside.appendChild( logo );<br /> aside.appendChild( el( 'p', 'kuke-auth__brand', 'Kuke Wiki' ) );<br /> aside.appendChild( el( 'p', 'kuke-auth__tagline', 'KukeMC 群组服官方百科' ) );<br /> <br /> var ul = el( 'ul', 'kuke-auth__points' );<br /> POINTS.forEach( function ( item ) {<br /> var li = el( 'li', 'kuke-auth__point' );<br /> li.appendChild( svg( ICONS[ item.icon ], 'kuke-auth__point-icon' ) );<br /> li.appendChild( el( 'span', null, item.text ) );<br /> ul.appendChild( li );<br /> } );<br /> aside.appendChild( ul );<br /> aside.appendChild( el( 'p', 'kuke-auth__note', '本站内容由社区共同维护，欢迎参与。' ) );<br /> dialog.appendChild( aside );<br /> <br /> // 右：表单栏<br /> main = el( 'div', 'kuke-auth__main' );<br /> <br /> var head = el( 'div', 'kuke-auth__head' );<br /> var tabs = el( 'div', 'kuke-auth__tabs' );<br /> tabs.setAttribute( 'role', 'tablist' );<br /> Object.keys( MODES ).forEach( function ( key ) {<br /> var b = el( 'button', 'kuke-auth__tab', MODES[ key ].tab );<br /> b.type = 'button';<br /> b.dataset.mode = key;<br /> b.setAttribute( 'role', 'tab' );<br /> b.addEventListener( 'click', function () {<br /> render( key );<br /> } );<br /> tabs.appendChild( b );<br /> } );<br /> head.appendChild( tabs );<br /> <br /> titleEl = el( 'h2', 'kuke-auth__title' );<br /> titleEl.id = 'kuke-auth-title';<br /> head.appendChild( titleEl );<br /> subEl = el( 'p', 'kuke-auth__sub' );<br /> head.appendChild( subEl );<br /> main.appendChild( head );<br /> <br /> body = el( 'div', 'kuke-auth__body' );<br /> main.appendChild( body );<br /> dialog.appendChild( main );<br /> <br /> root.appendChild( dialog );<br /> document.body.appendChild( root );<br /> }<br /> <br /> /* ---------- 表单 ---------- */<br /> <br /> function passwordToggle( input ) {<br /> var btn = el( 'button', 'kuke-auth__peek' );<br /> btn.type = 'button';<br /> btn.setAttribute( 'aria-label', '显示密码' );<br /> btn.appendChild( svg( ICONS.eye, null, '17' ) );<br /> btn.addEventListener( 'click', function () {<br /> var show = input.type === 'password';<br /> input.type = show ? 'text' : 'password';<br /> btn.setAttribute( 'aria-label', show ? '隐藏密码' : '显示密码' );<br /> btn.textContent = '';<br /> btn.appendChild( svg( show ? ICONS.eyeOff : ICONS.eye, null, '17' ) );<br /> input.focus();<br /> } );<br /> return btn;<br /> }<br /> <br /> function field( spec, form ) {<br /> if ( spec.type === 'checkbox' ) {<br /> var wrap = el( 'label', 'kuke-auth__check' );<br /> var box = el( 'input' );<br /> box.type = 'checkbox';<br /> box.name = spec.name;<br /> wrap.appendChild( box );<br /> wrap.appendChild( el( 'span', null, spec.label ) );<br /> return wrap;<br /> }<br /> <br /> var id = 'kuke-auth-' + spec.name;<br /> var row = el( 'div', 'kuke-auth__field' );<br /> var label = el( 'label', 'kuke-auth__label', spec.label );<br /> label.htmlFor = id;<br /> if ( !spec.required ) {<br /> label.appendChild( el( 'span', 'kuke-auth__optional', '选填' ) );<br /> }<br /> row.appendChild( label );<br /> <br /> var control = el( 'div', 'kuke-auth__control' );<br /> var input = el( 'input', 'kuke-auth__input' );<br /> input.id = id;<br /> input.name = spec.name;<br /> input.type = spec.type === 'captcha' ? 'text' : spec.type;<br /> if ( spec.autocomplete ) {<br /> input.autocomplete = spec.autocomplete;<br /> }<br /> if ( spec.required ) {<br /> input.required = true;<br /> }<br /> if ( spec.type === 'captcha' ) {<br /> input.autocomplete = 'off';<br /> input.inputMode = 'text';<br /> row.classList.add( 'kuke-auth__field--captcha' );<br /> }<br /> control.appendChild( input );<br /> if ( spec.type === 'password' ) {<br /> control.classList.add( 'kuke-auth__control--peek' );<br /> control.appendChild( passwordToggle( input ) );<br /> }<br /> row.appendChild( control );<br /> <br /> if ( spec.type === 'captcha' ) {<br /> var q = el( 'p', 'kuke-auth__captcha' );<br /> q.appendChild( el( 'span', 'kuke-auth__captcha-q', '正在获取…' ) );<br /> row.appendChild( q );<br /> form.captchaQuestion = q.firstChild;<br /> loadCaptcha().then( function ( data ) {<br /> if ( !form.isConnected ) {<br /> return;<br /> }<br /> captcha = data;<br /> q.firstChild.textContent = data ? data.question : '（暂不可用，请稍后重试）';<br /> } );<br /> }<br /> if ( spec.hint ) {<br /> row.appendChild( el( 'p', 'kuke-auth__hint', spec.hint ) );<br /> }<br /> return row;<br /> }<br /> <br /> function showAlert( text ) {<br /> if ( !alertEl ) {<br /> return;<br /> }<br /> alertEl.textContent = '';<br /> if ( !text ) {<br /> alertEl.hidden = true;<br /> return;<br /> }<br /> alertEl.appendChild( svg( ICONS.alert, 'kuke-auth__alert-icon' ) );<br /> alertEl.appendChild( el( 'span', null, text ) );<br /> alertEl.hidden = false;<br /> }<br /> <br /> function setSubmitting( btn, mode, on ) {<br /> submitting = on;<br /> btn.disabled = on;<br /> btn.classList.toggle( 'kuke-auth__submit--busy', on );<br /> btn.textContent = '';<br /> if ( on ) {<br /> btn.appendChild( el( 'span', 'kuke-auth__spinner' ) );<br /> btn.appendChild( el( 'span', null, MODES[ mode ].busy ) );<br /> } else {<br /> btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );<br /> }<br /> }<br /> <br /> function values( form ) {<br /> var out = {};<br /> Array.prototype.forEach.call( form.querySelectorAll( 'input' ), function ( i ) {<br /> out[ i.name ] = i.type === 'checkbox' ? ( i.checked ? '1' : '' ) : i.value;<br /> } );<br /> return out;<br /> }<br /> <br /> function submit( mode, form, btn ) {<br /> if ( submitting ) {<br /> return;<br /> }<br /> var v = values( form );<br /> if ( mode === 'signup' &amp;&amp; v.password !== v.retype ) {<br /> showAlert( '两次输入的密码不一致。' );<br /> return;<br /> }<br /> showAlert( '' );<br /> setSubmitting( btn, mode, true );<br /> <br /> var type = mode === 'login' ? 'login' : 'createaccount';<br /> ready().then( function () {<br /> return token( type );<br /> } ).then( function ( tk ) {<br /> var params;<br /> if ( mode === 'login' ) {<br /> params = {<br /> action: 'clientlogin',<br /> loginreturnurl: returnUrl(),<br /> logintoken: tk,<br /> username: v.username,<br /> password: v.password,<br /> formatversion: 2,<br /> errorformat: 'html',<br /> errorlang: 'zh'<br /> };<br /> if ( v.rememberMe ) {<br /> params.rememberMe = '1';<br /> }<br /> } else {<br /> params = {<br /> action: 'createaccount',<br /> createreturnurl: returnUrl(),<br /> createtoken: tk,<br /> username: v.username,<br /> password: v.password,<br /> retype: v.retype,<br /> formatversion: 2,<br /> errorformat: 'html',<br /> errorlang: 'zh'<br /> };<br /> if ( v.email ) {<br /> params.email = v.email;<br /> }<br /> if ( captcha ) {<br /> params.captchaId = captcha.id;<br /> params.captchaWord = v.captchaWord;<br /> }<br /> }<br /> return api.post( params );<br /> } ).then( function ( d ) {<br /> var res = d.clientlogin || d.createaccount || {};<br /> if ( res.status === 'PASS' ) {<br /> location.href = returnUrl();<br /> return;<br /> }<br /> // 需要额外步骤（如二次验证）时交给完整页面处理<br /> if ( res.status === 'UI' || res.status === 'REDIRECT' ) {<br /> location.href = mw.util.getUrl( MODES[ mode ].page, { returnto: returnTarget() } );<br /> return;<br /> }<br /> setSubmitting( btn, mode, false );<br /> showAlert( res.message || '提交失败，请稍后重试。' );<br /> // token 与验证码一次性，失败后重取<br /> delete tokens[ type ];<br /> if ( mode === 'signup' ) {<br /> refreshCaptcha( form );<br /> }<br /> } ).catch( function ( code, data ) {<br /> setSubmitting( btn, mode, false );<br /> var msg = ( data &amp;&amp; data.error &amp;&amp; data.error.info ) || '网络异常，请稍后重试。';<br /> showAlert( msg );<br /> delete tokens[ type ];<br /> } );<br /> }<br /> <br /> function refreshCaptcha( form ) {<br /> var q = form.captchaQuestion;<br /> if ( !q ) {<br /> return;<br /> }<br /> q.textContent = '正在获取…';<br /> loadCaptcha().then( function ( data ) {<br /> captcha = data;<br /> if ( q.isConnected ) {<br /> q.textContent = data ? data.question : '（暂不可用，请稍后重试）';<br /> }<br /> } );<br /> }<br /> <br /> function render( mode ) {<br /> if ( current === mode ) {<br /> return;<br /> }<br /> current = mode;<br /> captcha = null;<br /> <br /> titleEl.textContent = MODES[ mode ].title;<br /> subEl.textContent = MODES[ mode ].sub;<br /> Array.prototype.forEach.call( root.querySelectorAll( '.kuke-auth__tab' ), function ( b ) {<br /> var on = b.dataset.mode === mode;<br /> b.classList.toggle( 'kuke-auth__tab--active', on );<br /> b.setAttribute( 'aria-selected', on ? 'true' : 'false' );<br /> } );<br /> <br /> body.textContent = '';<br /> <br /> alertEl = el( 'div', 'kuke-auth__alert' );<br /> alertEl.setAttribute( 'role', 'alert' );<br /> alertEl.hidden = true;<br /> body.appendChild( alertEl );<br /> <br /> var form = el( 'form', 'kuke-auth__form' );<br /> form.setAttribute( 'novalidate', 'novalidate' );<br /> FIELDS[ mode ].forEach( function ( spec ) {<br /> form.appendChild( field( spec, form ) );<br /> } );<br /> <br /> var btn = el( 'button', 'kuke-auth__submit' );<br /> btn.type = 'submit';<br /> btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );<br /> form.appendChild( btn );<br /> <br /> form.addEventListener( 'submit', function ( e ) {<br /> e.preventDefault();<br /> submit( mode, form, btn );<br /> } );<br /> body.appendChild( form );<br /> <br /> var foot = el( 'p', 'kuke-auth__foot' );<br /> if ( mode === 'login' ) {<br /> var reset = el( 'a', null, '忘记密码？' );<br /> reset.href = mw.util.getUrl( 'Special:PasswordReset' );<br /> foot.appendChild( reset );<br /> foot.appendChild( el( 'span', 'kuke-auth__dot', '·' ) );<br /> var toSignup = el( 'a', null, '还没有账号？立即注册' );<br /> toSignup.href = '#';<br /> toSignup.addEventListener( 'click', function ( e ) {<br /> e.preventDefault();<br /> render( 'signup' );<br /> } );<br /> foot.appendChild( toSignup );<br /> } else {<br /> foot.appendChild( el( 'span', null, '已有账号？' ) );<br /> var toLogin = el( 'a', null, '直接登录' );<br /> toLogin.href = '#';<br /> toLogin.addEventListener( 'click', function ( e ) {<br /> e.preventDefault();<br /> render( 'login' );<br /> } );<br /> foot.appendChild( toLogin );<br /> }<br /> body.appendChild( foot );<br /> <br /> main.scrollTop = 0;<br /> // 预热对应的 token<br /> token( mode === 'login' ? 'login' : 'createaccount' );<br /> <br /> var first = form.querySelector( 'input' );<br /> if ( first ) {<br /> first.focus();<br /> }<br /> }<br /> <br /> /* ---------- 开关 ---------- */<br /> <br /> function onKey( e ) {<br /> if ( e.key === 'Escape' ) {<br /> close();<br /> return;<br /> }<br /> if ( e.key !== 'Tab' || root.hidden ) {<br /> return;<br /> }<br /> var items = root.querySelectorAll(<br /> 'a[href], button:not([disabled]), input:not([type=hidden]), select, textarea'<br /> );<br /> if ( !items.length ) {<br /> return;<br /> }<br /> var first = items[ 0 ];<br /> var last = items[ items.length - 1 ];<br /> if ( e.shiftKey &amp;&amp; document.activeElement === first ) {<br /> e.preventDefault();<br /> last.focus();<br /> } else if ( !e.shiftKey &amp;&amp; document.activeElement === last ) {<br /> e.preventDefault();<br /> first.focus();<br /> }<br /> }<br /> <br /> function open( mode ) {<br /> if ( !root ) {<br /> build();<br /> }<br /> lastFocus = document.activeElement;<br /> root.hidden = false;<br /> document.body.classList.add( 'kuke-auth-open' );<br /> document.addEventListener( 'keydown', onKey );<br /> render( mode );<br /> }<br /> <br /> function close() {<br /> if ( !root || root.hidden ) {<br /> return;<br /> }<br /> root.hidden = true;<br /> current = null;<br /> document.body.classList.remove( 'kuke-auth-open' );<br /> document.removeEventListener( 'keydown', onKey );<br /> if ( lastFocus &amp;&amp; lastFocus.focus ) {<br /> lastFocus.focus();<br /> }<br /> }<br /> <br /> function modeOf( href ) {<br /> var target;<br /> try {<br /> target = new URL( href, location.href );<br /> } catch ( e ) {<br /> return null;<br /> }<br /> if ( target.origin !== location.origin ) {<br /> return null;<br /> }<br /> var path = decodeURIComponent( target.pathname + '?' + target.search );<br /> if ( /Special:UserLogin|特殊:用户登录|Special:登录/i.test( path ) ) {<br /> return 'login';<br /> }<br /> if ( /Special:CreateAccount|特殊:创建账户|Special:创建账号/i.test( path ) ) {<br /> return 'signup';<br /> }<br /> return null;<br /> }<br /> <br /> function onClick( e ) {<br /> if ( e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) {<br /> return;<br /> }<br /> var a = e.target.closest ? e.target.closest( 'a[href]' ) : null;<br /> if ( !a || a.target === '_blank' ) {<br /> return;<br /> }<br /> var mode = modeOf( a.getAttribute( 'href' ) );<br /> if ( !mode ) {<br /> return;<br /> }<br /> e.preventDefault();<br /> open( mode );<br /> }<br /> <br /> function init() {<br /> if ( mw.config.get( 'wgUserName' ) ) {<br /> return;<br /> }<br /> document.addEventListener( 'click', onClick );<br /> // 后台预取登录 token，弹窗打开时表单已可直接提交<br /> token( 'login' );<br /> var direct = /[?&amp;]kukeauth=(login|signup)/.exec( location.search );<br /> if ( direct ) {<br /> open( direct[ 1 ] );<br /> }<br /> }<br /> <br /> if ( document.readyState === 'loading' ) {<br /> document.addEventListener( 'DOMContentLoaded', init );<br /> } else {<br /> init();<br /> }<br /> }() );</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=237 2026-08-20T13:08:34Z

<p>Kuke：​移除加载动画，回滚到加入前的版本</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> /* 主导航 active 态：由 body class 驱动（服务端直出，无 JS 依赖） */<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;],<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;],<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;],<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;],<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;],<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;],<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:visited,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:visited,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:visited,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:visited,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:visited,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]::after,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]::after,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]::after,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]::after,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]::after,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:hover,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:hover,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:hover,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:hover,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:hover,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:hover,<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:focus,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:focus,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:focus,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:focus,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:focus,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav__link::after,<br /> .citizen-header-position-right .kuke-nav__link::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=236 2026-08-20T13:05:29Z

<p>Kuke：​加载动画：接力层柔光取呼吸动画均值浓度</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> /* 主导航 active 态：由 body class 驱动（服务端直出，无 JS 依赖） */<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;],<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;],<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;],<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;],<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;],<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;],<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:visited,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:visited,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:visited,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:visited,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:visited,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]::after,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]::after,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]::after,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]::after,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]::after,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:hover,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:hover,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:hover,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:hover,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:hover,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:hover,<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:focus,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:focus,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:focus,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:focus,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:focus,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav__link::after,<br /> .citizen-header-position-right .kuke-nav__link::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }<br /> /* ==========================================================================<br /> 24. 站内跳转加载动画<br /> 分两级出现，避免「秒进」的页面被闪一下：<br /> ≥ 110ms 顶部细进度条（轻量提示，几乎无感）<br /> ≥ 320ms 全屏磨砂遮罩 + Logo 环形动画（真正在等的时候才出现）<br /> 动画挂在「正在离开的那一页」上：浏览器会保留旧页面的画面，直到新页面<br /> 绘制第一帧，所以这层遮罩正好盖住整段白屏等待，新页面一出现即自然消失。<br /> -------------------------------------------------------------------------- */<br /> <br /> :root {<br /> --kuke-load-bg: rgb( 248 250 252 / 0.84 );<br /> --kuke-load-fg: #475569;<br /> --kuke-load-track: rgb( 15 23 42 / 0.07 );<br /> --kuke-load-halo: rgb( 14 165 233 / 0.16 );<br /> <br /> /* 接力层的柔光是静态的，而 .kuke-load 那层带呼吸动画（透明度在 0.55~1 之间<br /> 来回），均值明显低于满值。这里按均值配一档更淡的，两层交接时浓淡才一致。 */<br /> --kuke-relay-halo: rgb( 14 165 233 / 0.124 );<br /> }<br /> <br /> /* ---- 顶部进度条 ---- */<br /> <br /> .kuke-load-bar {<br /> position: fixed;<br /> inset-block-start: 0;<br /> inset-inline-start: 0;<br /> z-index: 2001;<br /> width: 0;<br /> height: 3px;<br /> border-end-end-radius: 3px;<br /> background: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand-strong, #0284c7 ),<br /> var( --kuke-brand, #0ea5e9 ) 55%,<br /> var( --kuke-brand-light, #7dd3fc )<br /> );<br /> box-shadow: 0 0 10px rgb( 14 165 233 / 0.55 );<br /> opacity: 0;<br /> pointer-events: none;<br /> transition:<br /> width 0.24s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> opacity 0.2s linear;<br /> }<br /> <br /> .kuke-load-bar.is-on {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 全屏遮罩 ---- */<br /> <br /> .kuke-load {<br /> position: fixed;<br /> inset: 0;<br /> z-index: 2000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> background: var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> opacity: 0;<br /> visibility: hidden;<br /> pointer-events: none;<br /> /* 淡入必须短：浏览器随时会把本页冻结成静态画面，过渡越长越容易被<br /> 定格在半透明的中途。0.12s 保证遮罩在冻结前就已经稳定成型。 */<br /> transition:<br /> opacity 0.12s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> visibility 0s linear 0.12s;<br /> }<br /> <br /> .kuke-load.is-on {<br /> opacity: 1;<br /> visibility: visible;<br /> pointer-events: auto;<br /> transition-delay: 0s;<br /> }<br /> <br /> .kuke-load__panel {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 1.25rem;<br /> opacity: 0;<br /> transform: translateY( 8px ) scale( 0.97 );<br /> transition:<br /> opacity 0.16s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> transform 0.16s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );<br /> }<br /> <br /> .kuke-load.is-on .kuke-load__panel {<br /> opacity: 1;<br /> transform: none;<br /> }<br /> <br /> /* ---- Logo + 环形指示器 ---- */<br /> <br /> .kuke-load__mark {<br /> position: relative;<br /> display: grid;<br /> place-items: center;<br /> width: 92px;<br /> height: 92px;<br /> }<br /> <br /> /* 静态底环 */<br /> .kuke-load__mark::before {<br /> content: '';<br /> position: absolute;<br /> inset: 0;<br /> border: 3px solid var( --kuke-load-track );<br /> border-radius: 50%;<br /> }<br /> <br /> /* 背后的柔光，给遮罩一点层次 */<br /> .kuke-load__mark::after {<br /> content: '';<br /> position: absolute;<br /> inset: -18px;<br /> border-radius: 50%;<br /> background: radial-gradient( circle, var( --kuke-load-halo ), transparent 68% );<br /> animation: kuke-load-halo 2.4s ease-in-out infinite;<br /> pointer-events: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> position: absolute;<br /> inset: 0;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> animation: kuke-load-spin 0.85s linear infinite;<br /> }<br /> <br /> .kuke-load__logo {<br /> position: relative;<br /> width: 54px;<br /> height: 54px;<br /> border-radius: 15px;<br /> box-shadow: var( --kuke-shadow-brand, 0 6px 16px rgb( 2 132 199 / 0.28 ) );<br /> animation: kuke-load-breathe 1.8s ease-in-out infinite;<br /> }<br /> <br /> /* ---- 文案 ---- */<br /> <br /> .kuke-load__text {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.15em;<br /> margin: 0;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> letter-spacing: 0.03em;<br /> color: var( --kuke-load-fg );<br /> }<br /> <br /> .kuke-load__dots {<br /> display: inline-flex;<br /> gap: 3px;<br /> }<br /> <br /> .kuke-load__dots i {<br /> width: 3px;<br /> height: 3px;<br /> border-radius: 50%;<br /> background: currentcolor;<br /> opacity: 0.25;<br /> animation: kuke-load-dot 1.2s ease-in-out infinite;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 2 ) {<br /> animation-delay: 0.16s;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 3 ) {<br /> animation-delay: 0.32s;<br /> }<br /> <br /> /* ---- 关键帧 ---- */<br /> <br /> @keyframes kuke-load-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-breathe {<br /> 0%,<br /> 100% {<br /> transform: scale( 1 );<br /> }<br /> <br /> 50% {<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-halo {<br /> 0%,<br /> 100% {<br /> opacity: 0.55;<br /> transform: scale( 0.92 );<br /> }<br /> <br /> 50% {<br /> opacity: 1;<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-dot {<br /> 0%,<br /> 60%,<br /> 100% {<br /> opacity: 0.25;<br /> transform: translateY( 0 );<br /> }<br /> <br /> 30% {<br /> opacity: 1;<br /> transform: translateY( -3px );<br /> }<br /> }<br /> <br /> /* ---- 接力遮罩 ----<br /> 浏览器收到新页面响应后，会把旧页面冻结成一张静态画面，旧页面上的动画随之<br /> 停住；这段静止最长可到数百毫秒。所以新页面在 &lt;head&gt; 里读到上一页留下的<br /> 标记时，立刻用这两个伪元素铺出同一层遮罩接住，等首帧画完再淡出。<br /> 写成伪元素是因为此刻 &lt;body&gt; 还没被解析出来，插不了真实节点。 */<br /> <br /> html.kuke-relay::before,<br /> html.kuke-relay::after {<br /> content: '';<br /> position: fixed;<br /> z-index: 2000;<br /> pointer-events: none;<br /> transition: opacity 0.2s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );<br /> }<br /> <br /> /* .kuke-load 的图标被下方那行「正在加载」连同间距一起顶高了这么多。<br /> 接力层没有文案，必须手动补上同样的位移，否则交接时图标会跳一下。 */<br /> :root {<br /> --kuke-relay-rise: 19px;<br /> }<br /> <br /> /* 磨砂底 + 柔光 + 居中的 Logo，逐项对齐 .kuke-load 的观感 */<br /> html.kuke-relay::before {<br /> inset: 0;<br /> background:<br /> url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' )<br /> center calc( 50% - var( --kuke-relay-rise ) ) / 54px 54px no-repeat,<br /> radial-gradient(<br /> circle 90px at center calc( 50% - var( --kuke-relay-rise ) ),<br /> var( --kuke-relay-halo, var( --kuke-load-halo ) ),<br /> transparent 68%<br /> ),<br /> var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> }<br /> <br /> /* 环形指示器：尺寸与 .kuke-load__mark 一致，视觉上完全接得上 */<br /> html.kuke-relay::after {<br /> inset-block-start: 50%;<br /> inset-inline-start: 50%;<br /> width: 92px;<br /> height: 92px;<br /> margin: calc( -46px - var( --kuke-relay-rise ) ) 0 0 -46px;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> /* 第二条动画是兜底：万一脚本没能摘掉遮罩，6s 后自行让开，绝不锁死页面 */<br /> animation:<br /> kuke-load-spin 0.85s linear infinite,<br /> kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay::before {<br /> animation: kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay-off::before,<br /> html.kuke-relay-off::after {<br /> opacity: 0;<br /> }<br /> <br /> @keyframes kuke-relay-bail {<br /> to {<br /> opacity: 0;<br /> visibility: hidden;<br /> }<br /> }<br /> <br /> /* ---- 暗色 ---- */<br /> <br /> html.skin-theme-clientpref-night,<br /> html.skin-theme-clientpref-black {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> --kuke-relay-halo: rgb( 56 189 248 / 0.155 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> --kuke-relay-halo: rgb( 56 189 248 / 0.155 );<br /> }<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1 {<br /> --kuke-load-bg: rgb( 0 0 0 / 0.86 );<br /> }<br /> <br /> /* ---- 降低动态效果 ---- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-load__ring,<br /> .kuke-load__logo,<br /> .kuke-load__mark::after,<br /> .kuke-load__dots i {<br /> animation: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-load__panel {<br /> transition: none;<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=235 2026-08-20T12:56:43Z

<p>Kuke：​加载动画：接力层柔光浓度对齐呼吸动画均值</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> /* 主导航 active 态：由 body class 驱动（服务端直出，无 JS 依赖） */<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;],<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;],<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;],<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;],<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;],<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;],<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:visited,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:visited,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:visited,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:visited,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:visited,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]::after,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]::after,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]::after,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]::after,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]::after,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:hover,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:hover,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:hover,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:hover,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:hover,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:hover,<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:focus,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:focus,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:focus,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:focus,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:focus,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav__link::after,<br /> .citizen-header-position-right .kuke-nav__link::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }<br /> /* ==========================================================================<br /> 24. 站内跳转加载动画<br /> 分两级出现，避免「秒进」的页面被闪一下：<br /> ≥ 110ms 顶部细进度条（轻量提示，几乎无感）<br /> ≥ 320ms 全屏磨砂遮罩 + Logo 环形动画（真正在等的时候才出现）<br /> 动画挂在「正在离开的那一页」上：浏览器会保留旧页面的画面，直到新页面<br /> 绘制第一帧，所以这层遮罩正好盖住整段白屏等待，新页面一出现即自然消失。<br /> -------------------------------------------------------------------------- */<br /> <br /> :root {<br /> --kuke-load-bg: rgb( 248 250 252 / 0.84 );<br /> --kuke-load-fg: #475569;<br /> --kuke-load-track: rgb( 15 23 42 / 0.07 );<br /> --kuke-load-halo: rgb( 14 165 233 / 0.16 );<br /> <br /> /* 接力层的柔光是静态的，而 .kuke-load 那层带呼吸动画（透明度在 0.55~1 之间<br /> 来回），均值明显低于满值。这里按均值配一档更淡的，两层交接时浓淡才一致。 */<br /> --kuke-relay-halo: rgb( 14 165 233 / 0.135 );<br /> }<br /> <br /> /* ---- 顶部进度条 ---- */<br /> <br /> .kuke-load-bar {<br /> position: fixed;<br /> inset-block-start: 0;<br /> inset-inline-start: 0;<br /> z-index: 2001;<br /> width: 0;<br /> height: 3px;<br /> border-end-end-radius: 3px;<br /> background: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand-strong, #0284c7 ),<br /> var( --kuke-brand, #0ea5e9 ) 55%,<br /> var( --kuke-brand-light, #7dd3fc )<br /> );<br /> box-shadow: 0 0 10px rgb( 14 165 233 / 0.55 );<br /> opacity: 0;<br /> pointer-events: none;<br /> transition:<br /> width 0.24s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> opacity 0.2s linear;<br /> }<br /> <br /> .kuke-load-bar.is-on {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 全屏遮罩 ---- */<br /> <br /> .kuke-load {<br /> position: fixed;<br /> inset: 0;<br /> z-index: 2000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> background: var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> opacity: 0;<br /> visibility: hidden;<br /> pointer-events: none;<br /> /* 淡入必须短：浏览器随时会把本页冻结成静态画面，过渡越长越容易被<br /> 定格在半透明的中途。0.12s 保证遮罩在冻结前就已经稳定成型。 */<br /> transition:<br /> opacity 0.12s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> visibility 0s linear 0.12s;<br /> }<br /> <br /> .kuke-load.is-on {<br /> opacity: 1;<br /> visibility: visible;<br /> pointer-events: auto;<br /> transition-delay: 0s;<br /> }<br /> <br /> .kuke-load__panel {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 1.25rem;<br /> opacity: 0;<br /> transform: translateY( 8px ) scale( 0.97 );<br /> transition:<br /> opacity 0.16s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> transform 0.16s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );<br /> }<br /> <br /> .kuke-load.is-on .kuke-load__panel {<br /> opacity: 1;<br /> transform: none;<br /> }<br /> <br /> /* ---- Logo + 环形指示器 ---- */<br /> <br /> .kuke-load__mark {<br /> position: relative;<br /> display: grid;<br /> place-items: center;<br /> width: 92px;<br /> height: 92px;<br /> }<br /> <br /> /* 静态底环 */<br /> .kuke-load__mark::before {<br /> content: '';<br /> position: absolute;<br /> inset: 0;<br /> border: 3px solid var( --kuke-load-track );<br /> border-radius: 50%;<br /> }<br /> <br /> /* 背后的柔光，给遮罩一点层次 */<br /> .kuke-load__mark::after {<br /> content: '';<br /> position: absolute;<br /> inset: -18px;<br /> border-radius: 50%;<br /> background: radial-gradient( circle, var( --kuke-load-halo ), transparent 68% );<br /> animation: kuke-load-halo 2.4s ease-in-out infinite;<br /> pointer-events: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> position: absolute;<br /> inset: 0;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> animation: kuke-load-spin 0.85s linear infinite;<br /> }<br /> <br /> .kuke-load__logo {<br /> position: relative;<br /> width: 54px;<br /> height: 54px;<br /> border-radius: 15px;<br /> box-shadow: var( --kuke-shadow-brand, 0 6px 16px rgb( 2 132 199 / 0.28 ) );<br /> animation: kuke-load-breathe 1.8s ease-in-out infinite;<br /> }<br /> <br /> /* ---- 文案 ---- */<br /> <br /> .kuke-load__text {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.15em;<br /> margin: 0;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> letter-spacing: 0.03em;<br /> color: var( --kuke-load-fg );<br /> }<br /> <br /> .kuke-load__dots {<br /> display: inline-flex;<br /> gap: 3px;<br /> }<br /> <br /> .kuke-load__dots i {<br /> width: 3px;<br /> height: 3px;<br /> border-radius: 50%;<br /> background: currentcolor;<br /> opacity: 0.25;<br /> animation: kuke-load-dot 1.2s ease-in-out infinite;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 2 ) {<br /> animation-delay: 0.16s;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 3 ) {<br /> animation-delay: 0.32s;<br /> }<br /> <br /> /* ---- 关键帧 ---- */<br /> <br /> @keyframes kuke-load-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-breathe {<br /> 0%,<br /> 100% {<br /> transform: scale( 1 );<br /> }<br /> <br /> 50% {<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-halo {<br /> 0%,<br /> 100% {<br /> opacity: 0.55;<br /> transform: scale( 0.92 );<br /> }<br /> <br /> 50% {<br /> opacity: 1;<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-dot {<br /> 0%,<br /> 60%,<br /> 100% {<br /> opacity: 0.25;<br /> transform: translateY( 0 );<br /> }<br /> <br /> 30% {<br /> opacity: 1;<br /> transform: translateY( -3px );<br /> }<br /> }<br /> <br /> /* ---- 接力遮罩 ----<br /> 浏览器收到新页面响应后，会把旧页面冻结成一张静态画面，旧页面上的动画随之<br /> 停住；这段静止最长可到数百毫秒。所以新页面在 &lt;head&gt; 里读到上一页留下的<br /> 标记时，立刻用这两个伪元素铺出同一层遮罩接住，等首帧画完再淡出。<br /> 写成伪元素是因为此刻 &lt;body&gt; 还没被解析出来，插不了真实节点。 */<br /> <br /> html.kuke-relay::before,<br /> html.kuke-relay::after {<br /> content: '';<br /> position: fixed;<br /> z-index: 2000;<br /> pointer-events: none;<br /> transition: opacity 0.2s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );<br /> }<br /> <br /> /* .kuke-load 的图标被下方那行「正在加载」连同间距一起顶高了这么多。<br /> 接力层没有文案，必须手动补上同样的位移，否则交接时图标会跳一下。 */<br /> :root {<br /> --kuke-relay-rise: 19px;<br /> }<br /> <br /> /* 磨砂底 + 柔光 + 居中的 Logo，逐项对齐 .kuke-load 的观感 */<br /> html.kuke-relay::before {<br /> inset: 0;<br /> background:<br /> url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' )<br /> center calc( 50% - var( --kuke-relay-rise ) ) / 54px 54px no-repeat,<br /> radial-gradient(<br /> circle 90px at center calc( 50% - var( --kuke-relay-rise ) ),<br /> var( --kuke-relay-halo, var( --kuke-load-halo ) ),<br /> transparent 68%<br /> ),<br /> var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> }<br /> <br /> /* 环形指示器：尺寸与 .kuke-load__mark 一致，视觉上完全接得上 */<br /> html.kuke-relay::after {<br /> inset-block-start: 50%;<br /> inset-inline-start: 50%;<br /> width: 92px;<br /> height: 92px;<br /> margin: calc( -46px - var( --kuke-relay-rise ) ) 0 0 -46px;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> /* 第二条动画是兜底：万一脚本没能摘掉遮罩，6s 后自行让开，绝不锁死页面 */<br /> animation:<br /> kuke-load-spin 0.85s linear infinite,<br /> kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay::before {<br /> animation: kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay-off::before,<br /> html.kuke-relay-off::after {<br /> opacity: 0;<br /> }<br /> <br /> @keyframes kuke-relay-bail {<br /> to {<br /> opacity: 0;<br /> visibility: hidden;<br /> }<br /> }<br /> <br /> /* ---- 暗色 ---- */<br /> <br /> html.skin-theme-clientpref-night,<br /> html.skin-theme-clientpref-black {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> --kuke-relay-halo: rgb( 56 189 248 / 0.142 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> --kuke-relay-halo: rgb( 56 189 248 / 0.142 );<br /> }<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1 {<br /> --kuke-load-bg: rgb( 0 0 0 / 0.86 );<br /> }<br /> <br /> /* ---- 降低动态效果 ---- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-load__ring,<br /> .kuke-load__logo,<br /> .kuke-load__mark::after,<br /> .kuke-load__dots i {<br /> animation: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-load__panel {<br /> transition: none;<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=234 2026-08-20T12:49:53Z

<p>Kuke：​加载动画：接力层柔光半径对齐</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> /* 主导航 active 态：由 body class 驱动（服务端直出，无 JS 依赖） */<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;],<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;],<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;],<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;],<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;],<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;],<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:visited,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:visited,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:visited,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:visited,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:visited,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]::after,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]::after,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]::after,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]::after,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]::after,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:hover,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:hover,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:hover,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:hover,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:hover,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:hover,<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:focus,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:focus,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:focus,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:focus,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:focus,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav__link::after,<br /> .citizen-header-position-right .kuke-nav__link::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }<br /> /* ==========================================================================<br /> 24. 站内跳转加载动画<br /> 分两级出现，避免「秒进」的页面被闪一下：<br /> ≥ 110ms 顶部细进度条（轻量提示，几乎无感）<br /> ≥ 320ms 全屏磨砂遮罩 + Logo 环形动画（真正在等的时候才出现）<br /> 动画挂在「正在离开的那一页」上：浏览器会保留旧页面的画面，直到新页面<br /> 绘制第一帧，所以这层遮罩正好盖住整段白屏等待，新页面一出现即自然消失。<br /> -------------------------------------------------------------------------- */<br /> <br /> :root {<br /> --kuke-load-bg: rgb( 248 250 252 / 0.84 );<br /> --kuke-load-fg: #475569;<br /> --kuke-load-track: rgb( 15 23 42 / 0.07 );<br /> --kuke-load-halo: rgb( 14 165 233 / 0.16 );<br /> }<br /> <br /> /* ---- 顶部进度条 ---- */<br /> <br /> .kuke-load-bar {<br /> position: fixed;<br /> inset-block-start: 0;<br /> inset-inline-start: 0;<br /> z-index: 2001;<br /> width: 0;<br /> height: 3px;<br /> border-end-end-radius: 3px;<br /> background: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand-strong, #0284c7 ),<br /> var( --kuke-brand, #0ea5e9 ) 55%,<br /> var( --kuke-brand-light, #7dd3fc )<br /> );<br /> box-shadow: 0 0 10px rgb( 14 165 233 / 0.55 );<br /> opacity: 0;<br /> pointer-events: none;<br /> transition:<br /> width 0.24s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> opacity 0.2s linear;<br /> }<br /> <br /> .kuke-load-bar.is-on {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 全屏遮罩 ---- */<br /> <br /> .kuke-load {<br /> position: fixed;<br /> inset: 0;<br /> z-index: 2000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> background: var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> opacity: 0;<br /> visibility: hidden;<br /> pointer-events: none;<br /> /* 淡入必须短：浏览器随时会把本页冻结成静态画面，过渡越长越容易被<br /> 定格在半透明的中途。0.12s 保证遮罩在冻结前就已经稳定成型。 */<br /> transition:<br /> opacity 0.12s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> visibility 0s linear 0.12s;<br /> }<br /> <br /> .kuke-load.is-on {<br /> opacity: 1;<br /> visibility: visible;<br /> pointer-events: auto;<br /> transition-delay: 0s;<br /> }<br /> <br /> .kuke-load__panel {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 1.25rem;<br /> opacity: 0;<br /> transform: translateY( 8px ) scale( 0.97 );<br /> transition:<br /> opacity 0.16s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> transform 0.16s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );<br /> }<br /> <br /> .kuke-load.is-on .kuke-load__panel {<br /> opacity: 1;<br /> transform: none;<br /> }<br /> <br /> /* ---- Logo + 环形指示器 ---- */<br /> <br /> .kuke-load__mark {<br /> position: relative;<br /> display: grid;<br /> place-items: center;<br /> width: 92px;<br /> height: 92px;<br /> }<br /> <br /> /* 静态底环 */<br /> .kuke-load__mark::before {<br /> content: '';<br /> position: absolute;<br /> inset: 0;<br /> border: 3px solid var( --kuke-load-track );<br /> border-radius: 50%;<br /> }<br /> <br /> /* 背后的柔光，给遮罩一点层次 */<br /> .kuke-load__mark::after {<br /> content: '';<br /> position: absolute;<br /> inset: -18px;<br /> border-radius: 50%;<br /> background: radial-gradient( circle, var( --kuke-load-halo ), transparent 68% );<br /> animation: kuke-load-halo 2.4s ease-in-out infinite;<br /> pointer-events: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> position: absolute;<br /> inset: 0;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> animation: kuke-load-spin 0.85s linear infinite;<br /> }<br /> <br /> .kuke-load__logo {<br /> position: relative;<br /> width: 54px;<br /> height: 54px;<br /> border-radius: 15px;<br /> box-shadow: var( --kuke-shadow-brand, 0 6px 16px rgb( 2 132 199 / 0.28 ) );<br /> animation: kuke-load-breathe 1.8s ease-in-out infinite;<br /> }<br /> <br /> /* ---- 文案 ---- */<br /> <br /> .kuke-load__text {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.15em;<br /> margin: 0;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> letter-spacing: 0.03em;<br /> color: var( --kuke-load-fg );<br /> }<br /> <br /> .kuke-load__dots {<br /> display: inline-flex;<br /> gap: 3px;<br /> }<br /> <br /> .kuke-load__dots i {<br /> width: 3px;<br /> height: 3px;<br /> border-radius: 50%;<br /> background: currentcolor;<br /> opacity: 0.25;<br /> animation: kuke-load-dot 1.2s ease-in-out infinite;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 2 ) {<br /> animation-delay: 0.16s;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 3 ) {<br /> animation-delay: 0.32s;<br /> }<br /> <br /> /* ---- 关键帧 ---- */<br /> <br /> @keyframes kuke-load-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-breathe {<br /> 0%,<br /> 100% {<br /> transform: scale( 1 );<br /> }<br /> <br /> 50% {<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-halo {<br /> 0%,<br /> 100% {<br /> opacity: 0.55;<br /> transform: scale( 0.92 );<br /> }<br /> <br /> 50% {<br /> opacity: 1;<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-dot {<br /> 0%,<br /> 60%,<br /> 100% {<br /> opacity: 0.25;<br /> transform: translateY( 0 );<br /> }<br /> <br /> 30% {<br /> opacity: 1;<br /> transform: translateY( -3px );<br /> }<br /> }<br /> <br /> /* ---- 接力遮罩 ----<br /> 浏览器收到新页面响应后，会把旧页面冻结成一张静态画面，旧页面上的动画随之<br /> 停住；这段静止最长可到数百毫秒。所以新页面在 &lt;head&gt; 里读到上一页留下的<br /> 标记时，立刻用这两个伪元素铺出同一层遮罩接住，等首帧画完再淡出。<br /> 写成伪元素是因为此刻 &lt;body&gt; 还没被解析出来，插不了真实节点。 */<br /> <br /> html.kuke-relay::before,<br /> html.kuke-relay::after {<br /> content: '';<br /> position: fixed;<br /> z-index: 2000;<br /> pointer-events: none;<br /> transition: opacity 0.2s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );<br /> }<br /> <br /> /* .kuke-load 的图标被下方那行「正在加载」连同间距一起顶高了这么多。<br /> 接力层没有文案，必须手动补上同样的位移，否则交接时图标会跳一下。 */<br /> :root {<br /> --kuke-relay-rise: 19px;<br /> }<br /> <br /> /* 磨砂底 + 柔光 + 居中的 Logo，逐项对齐 .kuke-load 的观感 */<br /> html.kuke-relay::before {<br /> inset: 0;<br /> background:<br /> url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' )<br /> center calc( 50% - var( --kuke-relay-rise ) ) / 54px 54px no-repeat,<br /> radial-gradient(<br /> circle 90px at center calc( 50% - var( --kuke-relay-rise ) ),<br /> var( --kuke-load-halo ),<br /> transparent 68%<br /> ),<br /> var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> }<br /> <br /> /* 环形指示器：尺寸与 .kuke-load__mark 一致，视觉上完全接得上 */<br /> html.kuke-relay::after {<br /> inset-block-start: 50%;<br /> inset-inline-start: 50%;<br /> width: 92px;<br /> height: 92px;<br /> margin: calc( -46px - var( --kuke-relay-rise ) ) 0 0 -46px;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> /* 第二条动画是兜底：万一脚本没能摘掉遮罩，6s 后自行让开，绝不锁死页面 */<br /> animation:<br /> kuke-load-spin 0.85s linear infinite,<br /> kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay::before {<br /> animation: kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay-off::before,<br /> html.kuke-relay-off::after {<br /> opacity: 0;<br /> }<br /> <br /> @keyframes kuke-relay-bail {<br /> to {<br /> opacity: 0;<br /> visibility: hidden;<br /> }<br /> }<br /> <br /> /* ---- 暗色 ---- */<br /> <br /> html.skin-theme-clientpref-night,<br /> html.skin-theme-clientpref-black {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> }<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1 {<br /> --kuke-load-bg: rgb( 0 0 0 / 0.86 );<br /> }<br /> <br /> /* ---- 降低动态效果 ---- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-load__ring,<br /> .kuke-load__logo,<br /> .kuke-load__mark::after,<br /> .kuke-load__dots i {<br /> animation: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-load__panel {<br /> transition: none;<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=233 2026-08-20T12:42:10Z

<p>Kuke：​加载动画：接力层对齐 JS 层图标位置</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> /* 主导航 active 态：由 body class 驱动（服务端直出，无 JS 依赖） */<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;],<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;],<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;],<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;],<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;],<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;],<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:visited,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:visited,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:visited,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:visited,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:visited,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]::after,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]::after,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]::after,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]::after,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]::after,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:hover,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:hover,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:hover,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:hover,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:hover,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:hover,<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:focus,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:focus,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:focus,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:focus,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:focus,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav__link::after,<br /> .citizen-header-position-right .kuke-nav__link::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }<br /> /* ==========================================================================<br /> 24. 站内跳转加载动画<br /> 分两级出现，避免「秒进」的页面被闪一下：<br /> ≥ 110ms 顶部细进度条（轻量提示，几乎无感）<br /> ≥ 320ms 全屏磨砂遮罩 + Logo 环形动画（真正在等的时候才出现）<br /> 动画挂在「正在离开的那一页」上：浏览器会保留旧页面的画面，直到新页面<br /> 绘制第一帧，所以这层遮罩正好盖住整段白屏等待，新页面一出现即自然消失。<br /> -------------------------------------------------------------------------- */<br /> <br /> :root {<br /> --kuke-load-bg: rgb( 248 250 252 / 0.84 );<br /> --kuke-load-fg: #475569;<br /> --kuke-load-track: rgb( 15 23 42 / 0.07 );<br /> --kuke-load-halo: rgb( 14 165 233 / 0.16 );<br /> }<br /> <br /> /* ---- 顶部进度条 ---- */<br /> <br /> .kuke-load-bar {<br /> position: fixed;<br /> inset-block-start: 0;<br /> inset-inline-start: 0;<br /> z-index: 2001;<br /> width: 0;<br /> height: 3px;<br /> border-end-end-radius: 3px;<br /> background: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand-strong, #0284c7 ),<br /> var( --kuke-brand, #0ea5e9 ) 55%,<br /> var( --kuke-brand-light, #7dd3fc )<br /> );<br /> box-shadow: 0 0 10px rgb( 14 165 233 / 0.55 );<br /> opacity: 0;<br /> pointer-events: none;<br /> transition:<br /> width 0.24s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> opacity 0.2s linear;<br /> }<br /> <br /> .kuke-load-bar.is-on {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 全屏遮罩 ---- */<br /> <br /> .kuke-load {<br /> position: fixed;<br /> inset: 0;<br /> z-index: 2000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> background: var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> opacity: 0;<br /> visibility: hidden;<br /> pointer-events: none;<br /> /* 淡入必须短：浏览器随时会把本页冻结成静态画面，过渡越长越容易被<br /> 定格在半透明的中途。0.12s 保证遮罩在冻结前就已经稳定成型。 */<br /> transition:<br /> opacity 0.12s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> visibility 0s linear 0.12s;<br /> }<br /> <br /> .kuke-load.is-on {<br /> opacity: 1;<br /> visibility: visible;<br /> pointer-events: auto;<br /> transition-delay: 0s;<br /> }<br /> <br /> .kuke-load__panel {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 1.25rem;<br /> opacity: 0;<br /> transform: translateY( 8px ) scale( 0.97 );<br /> transition:<br /> opacity 0.16s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> transform 0.16s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );<br /> }<br /> <br /> .kuke-load.is-on .kuke-load__panel {<br /> opacity: 1;<br /> transform: none;<br /> }<br /> <br /> /* ---- Logo + 环形指示器 ---- */<br /> <br /> .kuke-load__mark {<br /> position: relative;<br /> display: grid;<br /> place-items: center;<br /> width: 92px;<br /> height: 92px;<br /> }<br /> <br /> /* 静态底环 */<br /> .kuke-load__mark::before {<br /> content: '';<br /> position: absolute;<br /> inset: 0;<br /> border: 3px solid var( --kuke-load-track );<br /> border-radius: 50%;<br /> }<br /> <br /> /* 背后的柔光，给遮罩一点层次 */<br /> .kuke-load__mark::after {<br /> content: '';<br /> position: absolute;<br /> inset: -18px;<br /> border-radius: 50%;<br /> background: radial-gradient( circle, var( --kuke-load-halo ), transparent 68% );<br /> animation: kuke-load-halo 2.4s ease-in-out infinite;<br /> pointer-events: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> position: absolute;<br /> inset: 0;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> animation: kuke-load-spin 0.85s linear infinite;<br /> }<br /> <br /> .kuke-load__logo {<br /> position: relative;<br /> width: 54px;<br /> height: 54px;<br /> border-radius: 15px;<br /> box-shadow: var( --kuke-shadow-brand, 0 6px 16px rgb( 2 132 199 / 0.28 ) );<br /> animation: kuke-load-breathe 1.8s ease-in-out infinite;<br /> }<br /> <br /> /* ---- 文案 ---- */<br /> <br /> .kuke-load__text {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.15em;<br /> margin: 0;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> letter-spacing: 0.03em;<br /> color: var( --kuke-load-fg );<br /> }<br /> <br /> .kuke-load__dots {<br /> display: inline-flex;<br /> gap: 3px;<br /> }<br /> <br /> .kuke-load__dots i {<br /> width: 3px;<br /> height: 3px;<br /> border-radius: 50%;<br /> background: currentcolor;<br /> opacity: 0.25;<br /> animation: kuke-load-dot 1.2s ease-in-out infinite;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 2 ) {<br /> animation-delay: 0.16s;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 3 ) {<br /> animation-delay: 0.32s;<br /> }<br /> <br /> /* ---- 关键帧 ---- */<br /> <br /> @keyframes kuke-load-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-breathe {<br /> 0%,<br /> 100% {<br /> transform: scale( 1 );<br /> }<br /> <br /> 50% {<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-halo {<br /> 0%,<br /> 100% {<br /> opacity: 0.55;<br /> transform: scale( 0.92 );<br /> }<br /> <br /> 50% {<br /> opacity: 1;<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-dot {<br /> 0%,<br /> 60%,<br /> 100% {<br /> opacity: 0.25;<br /> transform: translateY( 0 );<br /> }<br /> <br /> 30% {<br /> opacity: 1;<br /> transform: translateY( -3px );<br /> }<br /> }<br /> <br /> /* ---- 接力遮罩 ----<br /> 浏览器收到新页面响应后，会把旧页面冻结成一张静态画面，旧页面上的动画随之<br /> 停住；这段静止最长可到数百毫秒。所以新页面在 &lt;head&gt; 里读到上一页留下的<br /> 标记时，立刻用这两个伪元素铺出同一层遮罩接住，等首帧画完再淡出。<br /> 写成伪元素是因为此刻 &lt;body&gt; 还没被解析出来，插不了真实节点。 */<br /> <br /> html.kuke-relay::before,<br /> html.kuke-relay::after {<br /> content: '';<br /> position: fixed;<br /> z-index: 2000;<br /> pointer-events: none;<br /> transition: opacity 0.2s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );<br /> }<br /> <br /> /* .kuke-load 的图标被下方那行「正在加载」连同间距一起顶高了这么多。<br /> 接力层没有文案，必须手动补上同样的位移，否则交接时图标会跳一下。 */<br /> :root {<br /> --kuke-relay-rise: 19px;<br /> }<br /> <br /> /* 磨砂底 + 柔光 + 居中的 Logo，逐项对齐 .kuke-load 的观感 */<br /> html.kuke-relay::before {<br /> inset: 0;<br /> background:<br /> url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' )<br /> center calc( 50% - var( --kuke-relay-rise ) ) / 54px 54px no-repeat,<br /> radial-gradient(<br /> circle 64px at center calc( 50% - var( --kuke-relay-rise ) ),<br /> var( --kuke-load-halo ),<br /> transparent 68%<br /> ),<br /> var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> }<br /> <br /> /* 环形指示器：尺寸与 .kuke-load__mark 一致，视觉上完全接得上 */<br /> html.kuke-relay::after {<br /> inset-block-start: 50%;<br /> inset-inline-start: 50%;<br /> width: 92px;<br /> height: 92px;<br /> margin: calc( -46px - var( --kuke-relay-rise ) ) 0 0 -46px;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> /* 第二条动画是兜底：万一脚本没能摘掉遮罩，6s 后自行让开，绝不锁死页面 */<br /> animation:<br /> kuke-load-spin 0.85s linear infinite,<br /> kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay::before {<br /> animation: kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay-off::before,<br /> html.kuke-relay-off::after {<br /> opacity: 0;<br /> }<br /> <br /> @keyframes kuke-relay-bail {<br /> to {<br /> opacity: 0;<br /> visibility: hidden;<br /> }<br /> }<br /> <br /> /* ---- 暗色 ---- */<br /> <br /> html.skin-theme-clientpref-night,<br /> html.skin-theme-clientpref-black {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> }<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1 {<br /> --kuke-load-bg: rgb( 0 0 0 / 0.86 );<br /> }<br /> <br /> /* ---- 降低动态效果 ---- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-load__ring,<br /> .kuke-load__logo,<br /> .kuke-load__mark::after,<br /> .kuke-load__dots i {<br /> animation: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-load__panel {<br /> transition: none;<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=232 2026-08-20T12:15:29Z

<p>Kuke：​加载动画：缩短淡入过渡</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> /* 主导航 active 态：由 body class 驱动（服务端直出，无 JS 依赖） */<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;],<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;],<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;],<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;],<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;],<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;],<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:visited,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:visited,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:visited,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:visited,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:visited,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]::after,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]::after,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]::after,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]::after,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]::after,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:hover,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:hover,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:hover,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:hover,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:hover,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:hover,<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:focus,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:focus,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:focus,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:focus,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:focus,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav__link::after,<br /> .citizen-header-position-right .kuke-nav__link::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }<br /> /* ==========================================================================<br /> 24. 站内跳转加载动画<br /> 分两级出现，避免「秒进」的页面被闪一下：<br /> ≥ 110ms 顶部细进度条（轻量提示，几乎无感）<br /> ≥ 320ms 全屏磨砂遮罩 + Logo 环形动画（真正在等的时候才出现）<br /> 动画挂在「正在离开的那一页」上：浏览器会保留旧页面的画面，直到新页面<br /> 绘制第一帧，所以这层遮罩正好盖住整段白屏等待，新页面一出现即自然消失。<br /> -------------------------------------------------------------------------- */<br /> <br /> :root {<br /> --kuke-load-bg: rgb( 248 250 252 / 0.84 );<br /> --kuke-load-fg: #475569;<br /> --kuke-load-track: rgb( 15 23 42 / 0.07 );<br /> --kuke-load-halo: rgb( 14 165 233 / 0.16 );<br /> }<br /> <br /> /* ---- 顶部进度条 ---- */<br /> <br /> .kuke-load-bar {<br /> position: fixed;<br /> inset-block-start: 0;<br /> inset-inline-start: 0;<br /> z-index: 2001;<br /> width: 0;<br /> height: 3px;<br /> border-end-end-radius: 3px;<br /> background: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand-strong, #0284c7 ),<br /> var( --kuke-brand, #0ea5e9 ) 55%,<br /> var( --kuke-brand-light, #7dd3fc )<br /> );<br /> box-shadow: 0 0 10px rgb( 14 165 233 / 0.55 );<br /> opacity: 0;<br /> pointer-events: none;<br /> transition:<br /> width 0.24s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> opacity 0.2s linear;<br /> }<br /> <br /> .kuke-load-bar.is-on {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 全屏遮罩 ---- */<br /> <br /> .kuke-load {<br /> position: fixed;<br /> inset: 0;<br /> z-index: 2000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> background: var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> opacity: 0;<br /> visibility: hidden;<br /> pointer-events: none;<br /> /* 淡入必须短：浏览器随时会把本页冻结成静态画面，过渡越长越容易被<br /> 定格在半透明的中途。0.12s 保证遮罩在冻结前就已经稳定成型。 */<br /> transition:<br /> opacity 0.12s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> visibility 0s linear 0.12s;<br /> }<br /> <br /> .kuke-load.is-on {<br /> opacity: 1;<br /> visibility: visible;<br /> pointer-events: auto;<br /> transition-delay: 0s;<br /> }<br /> <br /> .kuke-load__panel {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 1.25rem;<br /> opacity: 0;<br /> transform: translateY( 8px ) scale( 0.97 );<br /> transition:<br /> opacity 0.16s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> transform 0.16s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );<br /> }<br /> <br /> .kuke-load.is-on .kuke-load__panel {<br /> opacity: 1;<br /> transform: none;<br /> }<br /> <br /> /* ---- Logo + 环形指示器 ---- */<br /> <br /> .kuke-load__mark {<br /> position: relative;<br /> display: grid;<br /> place-items: center;<br /> width: 92px;<br /> height: 92px;<br /> }<br /> <br /> /* 静态底环 */<br /> .kuke-load__mark::before {<br /> content: '';<br /> position: absolute;<br /> inset: 0;<br /> border: 3px solid var( --kuke-load-track );<br /> border-radius: 50%;<br /> }<br /> <br /> /* 背后的柔光，给遮罩一点层次 */<br /> .kuke-load__mark::after {<br /> content: '';<br /> position: absolute;<br /> inset: -18px;<br /> border-radius: 50%;<br /> background: radial-gradient( circle, var( --kuke-load-halo ), transparent 68% );<br /> animation: kuke-load-halo 2.4s ease-in-out infinite;<br /> pointer-events: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> position: absolute;<br /> inset: 0;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> animation: kuke-load-spin 0.85s linear infinite;<br /> }<br /> <br /> .kuke-load__logo {<br /> position: relative;<br /> width: 54px;<br /> height: 54px;<br /> border-radius: 15px;<br /> box-shadow: var( --kuke-shadow-brand, 0 6px 16px rgb( 2 132 199 / 0.28 ) );<br /> animation: kuke-load-breathe 1.8s ease-in-out infinite;<br /> }<br /> <br /> /* ---- 文案 ---- */<br /> <br /> .kuke-load__text {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.15em;<br /> margin: 0;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> letter-spacing: 0.03em;<br /> color: var( --kuke-load-fg );<br /> }<br /> <br /> .kuke-load__dots {<br /> display: inline-flex;<br /> gap: 3px;<br /> }<br /> <br /> .kuke-load__dots i {<br /> width: 3px;<br /> height: 3px;<br /> border-radius: 50%;<br /> background: currentcolor;<br /> opacity: 0.25;<br /> animation: kuke-load-dot 1.2s ease-in-out infinite;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 2 ) {<br /> animation-delay: 0.16s;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 3 ) {<br /> animation-delay: 0.32s;<br /> }<br /> <br /> /* ---- 关键帧 ---- */<br /> <br /> @keyframes kuke-load-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-breathe {<br /> 0%,<br /> 100% {<br /> transform: scale( 1 );<br /> }<br /> <br /> 50% {<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-halo {<br /> 0%,<br /> 100% {<br /> opacity: 0.55;<br /> transform: scale( 0.92 );<br /> }<br /> <br /> 50% {<br /> opacity: 1;<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-dot {<br /> 0%,<br /> 60%,<br /> 100% {<br /> opacity: 0.25;<br /> transform: translateY( 0 );<br /> }<br /> <br /> 30% {<br /> opacity: 1;<br /> transform: translateY( -3px );<br /> }<br /> }<br /> <br /> /* ---- 接力遮罩 ----<br /> 浏览器收到新页面响应后，会把旧页面冻结成一张静态画面，旧页面上的动画随之<br /> 停住；这段静止最长可到数百毫秒。所以新页面在 &lt;head&gt; 里读到上一页留下的<br /> 标记时，立刻用这两个伪元素铺出同一层遮罩接住，等首帧画完再淡出。<br /> 写成伪元素是因为此刻 &lt;body&gt; 还没被解析出来，插不了真实节点。 */<br /> <br /> html.kuke-relay::before,<br /> html.kuke-relay::after {<br /> content: '';<br /> position: fixed;<br /> z-index: 2000;<br /> pointer-events: none;<br /> transition: opacity 0.2s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );<br /> }<br /> <br /> /* 磨砂底 + 居中的 Logo */<br /> html.kuke-relay::before {<br /> inset: 0;<br /> background:<br /> url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' )<br /> center / 54px 54px no-repeat,<br /> var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> }<br /> <br /> /* 环形指示器：尺寸与 .kuke-load__mark 一致，视觉上完全接得上 */<br /> html.kuke-relay::after {<br /> inset-block-start: 50%;<br /> inset-inline-start: 50%;<br /> width: 92px;<br /> height: 92px;<br /> margin: -46px 0 0 -46px;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> /* 第二条动画是兜底：万一脚本没能摘掉遮罩，6s 后自行让开，绝不锁死页面 */<br /> animation:<br /> kuke-load-spin 0.85s linear infinite,<br /> kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay::before {<br /> animation: kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay-off::before,<br /> html.kuke-relay-off::after {<br /> opacity: 0;<br /> }<br /> <br /> @keyframes kuke-relay-bail {<br /> to {<br /> opacity: 0;<br /> visibility: hidden;<br /> }<br /> }<br /> <br /> /* ---- 暗色 ---- */<br /> <br /> html.skin-theme-clientpref-night,<br /> html.skin-theme-clientpref-black {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> }<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1 {<br /> --kuke-load-bg: rgb( 0 0 0 / 0.86 );<br /> }<br /> <br /> /* ---- 降低动态效果 ---- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-load__ring,<br /> .kuke-load__logo,<br /> .kuke-load__mark::after,<br /> .kuke-load__dots i {<br /> animation: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-load__panel {<br /> transition: none;<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Common.js&diff=231 2026-08-20T12:12:41Z

<p>Kuke：​加载动画：时序前移 + 跨页接力遮罩</p> <hr /> <div>/* 横版登录 / 注册弹窗。<br /> 表单在本地直接渲染（不再抓取 Special 页面的 HTML），提交走 Action API<br /> clientlogin / createaccount，token 在页面加载时就后台预取，<br /> 因此弹窗打开即可用，没有等待。<br /> 独立页面 Special:UserLogin / Special:CreateAccount 保留，无 JS 时仍可用。 */<br /> ( function () {<br /> 'use strict';<br /> <br /> var LOGO = 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png';<br /> <br /> var MODES = {<br /> login: {<br /> page: 'Special:UserLogin',<br /> tab: '登录',<br /> title: '登录到 Kuke Wiki',<br /> sub: '登录后即可编辑条目、参与讨论并同步个人偏好设置。',<br /> submit: '登录',<br /> busy: '正在登录…'<br /> },<br /> signup: {<br /> page: 'Special:CreateAccount',<br /> tab: '注册',<br /> title: '创建账号',<br /> sub: '加入 KukeMC 官方百科的编辑与维护，只需一分钟。',<br /> submit: '创建账号',<br /> busy: '正在创建…'<br /> }<br /> };<br /> <br /> var FIELDS = {<br /> login: [<br /> { name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },<br /> { name: 'password', label: '密码', type: 'password', autocomplete: 'current-password', required: true },<br /> { name: 'rememberMe', label: '在此浏览器上保持登录', type: 'checkbox' }<br /> ],<br /> signup: [<br /> { name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },<br /> { name: 'password', label: '密码', type: 'password', autocomplete: 'new-password', required: true },<br /> { name: 'retype', label: '确认密码', type: 'password', autocomplete: 'new-password', required: true },<br /> { name: 'email', label: '电子邮件', type: 'email', autocomplete: 'email', hint: '选填，用于找回密码' },<br /> { name: 'captchaWord', label: '验证码', type: 'captcha', required: true }<br /> ]<br /> };<br /> <br /> var POINTS = [<br /> { icon: 'pencil', text: '编辑与创建条目，完善服务器资料' },<br /> { icon: 'chat', text: '参与讨论页，与其他编辑者协作' },<br /> { icon: 'star', text: '保存个人偏好、监视列表与编辑历史' },<br /> { icon: 'clock', text: '追踪最近更改，第一时间了解更新' }<br /> ];<br /> <br /> var ICONS = {<br /> pencil: 'M13.5 2.5a2.12 2.12 0 0 1 3 3L7 15l-4 1 1-4Z',<br /> chat: 'M3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v7a1.5 1.5 0 0 1-1.5 1.5H8l-4 3v-3h-.5A1.5 1.5 0 0 1 3 12.5Z',<br /> star: 'm10 2.6 2.3 4.66 5.15.75-3.72 3.63.88 5.12L10 14.34l-4.6 2.42.87-5.12L2.55 8l5.15-.75Z',<br /> clock: 'M10 2.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Zm0 3.6v4.2l3 1.8',<br /> close: 'M5 5l10 10M15 5L5 15',<br /> eye: 'M1.8 10S4.9 4.7 10 4.7 18.2 10 18.2 10 15.1 15.3 10 15.3 1.8 10 1.8 10Zm8.2 2.2a2.2 2.2 0 1 0 0-4.4 2.2 2.2 0 0 0 0 4.4Z',<br /> eyeOff: 'M3 3l14 14M8.2 8.3A2.2 2.2 0 0 0 10 12.2c.6 0 1.1-.2 1.6-.6M6.1 6.2C3.6 7.6 1.8 10 1.8 10s3.1 5.3 8.2 5.3c1.4 0 2.6-.4 3.7-1M15.5 13C17.3 11.8 18.2 10 18.2 10S15.1 4.7 10 4.7c-.7 0-1.4.1-2 .3',<br /> alert: 'M10 6.6v4.2m0 2.6h.01M8.6 3.2 2.2 14.4A1.6 1.6 0 0 0 3.6 16.8h12.8a1.6 1.6 0 0 0 1.4-2.4L11.4 3.2a1.6 1.6 0 0 0-2.8 0Z'<br /> };<br /> <br /> var root = null;<br /> var main = null;<br /> var body = null;<br /> var titleEl = null;<br /> var subEl = null;<br /> var alertEl = null;<br /> var lastFocus = null;<br /> var current = null;<br /> var api = null;<br /> var apiReady = null;<br /> var tokens = {};<br /> var captcha = null;<br /> var submitting = false;<br /> <br /> function svg( d, cls, size ) {<br /> var s = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );<br /> s.setAttribute( 'viewBox', '0 0 20 20' );<br /> s.setAttribute( 'width', size || '18' );<br /> s.setAttribute( 'height', size || '18' );<br /> s.setAttribute( 'aria-hidden', 'true' );<br /> s.setAttribute( 'fill', 'none' );<br /> s.setAttribute( 'stroke', 'currentColor' );<br /> s.setAttribute( 'stroke-width', '1.6' );<br /> s.setAttribute( 'stroke-linecap', 'round' );<br /> s.setAttribute( 'stroke-linejoin', 'round' );<br /> if ( cls ) {<br /> s.setAttribute( 'class', cls );<br /> }<br /> var p = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );<br /> p.setAttribute( 'd', d );<br /> s.appendChild( p );<br /> return s;<br /> }<br /> <br /> function el( tag, cls, text ) {<br /> var n = document.createElement( tag );<br /> if ( cls ) {<br /> n.className = cls;<br /> }<br /> if ( text ) {<br /> n.textContent = text;<br /> }<br /> return n;<br /> }<br /> <br /> function returnTarget() {<br /> var page = mw.config.get( 'wgPageName' );<br /> if ( /^Special:(UserLogin|CreateAccount|UserLogout)$/i.test( page ) ) {<br /> return mw.config.get( 'wgMainPageTitle' ) || '首页';<br /> }<br /> return page;<br /> }<br /> <br /> function returnUrl() {<br /> return location.origin + mw.util.getUrl( returnTarget() );<br /> }<br /> <br /> /* ---------- API ---------- */<br /> <br /> function ready() {<br /> if ( !apiReady ) {<br /> apiReady = mw.loader.using( [ 'mediawiki.api', 'mediawiki.util' ] ).then( function () {<br /> api = new mw.Api();<br /> return api;<br /> } );<br /> }<br /> return apiReady;<br /> }<br /> <br /> function token( type ) {<br /> if ( tokens[ type ] ) {<br /> return tokens[ type ];<br /> }<br /> tokens[ type ] = ready().then( function () {<br /> return api.get( {<br /> action: 'query',<br /> meta: 'tokens',<br /> type: type,<br /> formatversion: 2<br /> } );<br /> } ).then( function ( d ) {<br /> return d.query.tokens[ type + 'token' ];<br /> } );<br /> return tokens[ type ];<br /> }<br /> <br /> /* QuestyCaptcha 的题面与 id，每次进入注册态重新取（旧 id 会失效） */<br /> function loadCaptcha() {<br /> return ready().then( function () {<br /> return api.get( {<br /> action: 'query',<br /> meta: 'authmanagerinfo',<br /> amirequestsfor: 'create',<br /> formatversion: 2<br /> } );<br /> } ).then( function ( d ) {<br /> var reqs = ( d.query &amp;&amp; d.query.authmanagerinfo &amp;&amp; d.query.authmanagerinfo.requests ) || [];<br /> var hit = null;<br /> reqs.forEach( function ( r ) {<br /> if ( r.id &amp;&amp; r.id.indexOf( 'Captcha' ) !== -1 &amp;&amp; r.fields &amp;&amp; r.fields.captchaId ) {<br /> hit = r;<br /> }<br /> } );<br /> if ( !hit ) {<br /> return null;<br /> }<br /> return {<br /> id: hit.fields.captchaId.value,<br /> question: hit.fields.captchaInfo ? hit.fields.captchaInfo.value : '',<br /> label: ( hit.fields.captchaWord &amp;&amp; hit.fields.captchaWord.label ) || '验证码'<br /> };<br /> } ).catch( function () {<br /> return null;<br /> } );<br /> }<br /> <br /> /* ---------- 结构 ---------- */<br /> <br /> function build() {<br /> root = el( 'div', 'kuke-auth' );<br /> root.hidden = true;<br /> <br /> var backdrop = el( 'div', 'kuke-auth__backdrop' );<br /> backdrop.addEventListener( 'click', close );<br /> root.appendChild( backdrop );<br /> <br /> var dialog = el( 'div', 'kuke-auth__dialog' );<br /> dialog.setAttribute( 'role', 'dialog' );<br /> dialog.setAttribute( 'aria-modal', 'true' );<br /> dialog.setAttribute( 'aria-labelledby', 'kuke-auth-title' );<br /> <br /> var closeBtn = el( 'button', 'kuke-auth__close' );<br /> closeBtn.type = 'button';<br /> closeBtn.setAttribute( 'aria-label', '关闭' );<br /> closeBtn.appendChild( svg( ICONS.close ) );<br /> closeBtn.addEventListener( 'click', close );<br /> dialog.appendChild( closeBtn );<br /> <br /> // 左：品牌栏<br /> var aside = el( 'aside', 'kuke-auth__aside' );<br /> var logo = el( 'img', 'kuke-auth__logo' );<br /> logo.src = LOGO;<br /> logo.alt = '';<br /> logo.width = 44;<br /> logo.height = 44;<br /> aside.appendChild( logo );<br /> aside.appendChild( el( 'p', 'kuke-auth__brand', 'Kuke Wiki' ) );<br /> aside.appendChild( el( 'p', 'kuke-auth__tagline', 'KukeMC 群组服官方百科' ) );<br /> <br /> var ul = el( 'ul', 'kuke-auth__points' );<br /> POINTS.forEach( function ( item ) {<br /> var li = el( 'li', 'kuke-auth__point' );<br /> li.appendChild( svg( ICONS[ item.icon ], 'kuke-auth__point-icon' ) );<br /> li.appendChild( el( 'span', null, item.text ) );<br /> ul.appendChild( li );<br /> } );<br /> aside.appendChild( ul );<br /> aside.appendChild( el( 'p', 'kuke-auth__note', '本站内容由社区共同维护，欢迎参与。' ) );<br /> dialog.appendChild( aside );<br /> <br /> // 右：表单栏<br /> main = el( 'div', 'kuke-auth__main' );<br /> <br /> var head = el( 'div', 'kuke-auth__head' );<br /> var tabs = el( 'div', 'kuke-auth__tabs' );<br /> tabs.setAttribute( 'role', 'tablist' );<br /> Object.keys( MODES ).forEach( function ( key ) {<br /> var b = el( 'button', 'kuke-auth__tab', MODES[ key ].tab );<br /> b.type = 'button';<br /> b.dataset.mode = key;<br /> b.setAttribute( 'role', 'tab' );<br /> b.addEventListener( 'click', function () {<br /> render( key );<br /> } );<br /> tabs.appendChild( b );<br /> } );<br /> head.appendChild( tabs );<br /> <br /> titleEl = el( 'h2', 'kuke-auth__title' );<br /> titleEl.id = 'kuke-auth-title';<br /> head.appendChild( titleEl );<br /> subEl = el( 'p', 'kuke-auth__sub' );<br /> head.appendChild( subEl );<br /> main.appendChild( head );<br /> <br /> body = el( 'div', 'kuke-auth__body' );<br /> main.appendChild( body );<br /> dialog.appendChild( main );<br /> <br /> root.appendChild( dialog );<br /> document.body.appendChild( root );<br /> }<br /> <br /> /* ---------- 表单 ---------- */<br /> <br /> function passwordToggle( input ) {<br /> var btn = el( 'button', 'kuke-auth__peek' );<br /> btn.type = 'button';<br /> btn.setAttribute( 'aria-label', '显示密码' );<br /> btn.appendChild( svg( ICONS.eye, null, '17' ) );<br /> btn.addEventListener( 'click', function () {<br /> var show = input.type === 'password';<br /> input.type = show ? 'text' : 'password';<br /> btn.setAttribute( 'aria-label', show ? '隐藏密码' : '显示密码' );<br /> btn.textContent = '';<br /> btn.appendChild( svg( show ? ICONS.eyeOff : ICONS.eye, null, '17' ) );<br /> input.focus();<br /> } );<br /> return btn;<br /> }<br /> <br /> function field( spec, form ) {<br /> if ( spec.type === 'checkbox' ) {<br /> var wrap = el( 'label', 'kuke-auth__check' );<br /> var box = el( 'input' );<br /> box.type = 'checkbox';<br /> box.name = spec.name;<br /> wrap.appendChild( box );<br /> wrap.appendChild( el( 'span', null, spec.label ) );<br /> return wrap;<br /> }<br /> <br /> var id = 'kuke-auth-' + spec.name;<br /> var row = el( 'div', 'kuke-auth__field' );<br /> var label = el( 'label', 'kuke-auth__label', spec.label );<br /> label.htmlFor = id;<br /> if ( !spec.required ) {<br /> label.appendChild( el( 'span', 'kuke-auth__optional', '选填' ) );<br /> }<br /> row.appendChild( label );<br /> <br /> var control = el( 'div', 'kuke-auth__control' );<br /> var input = el( 'input', 'kuke-auth__input' );<br /> input.id = id;<br /> input.name = spec.name;<br /> input.type = spec.type === 'captcha' ? 'text' : spec.type;<br /> if ( spec.autocomplete ) {<br /> input.autocomplete = spec.autocomplete;<br /> }<br /> if ( spec.required ) {<br /> input.required = true;<br /> }<br /> if ( spec.type === 'captcha' ) {<br /> input.autocomplete = 'off';<br /> input.inputMode = 'text';<br /> row.classList.add( 'kuke-auth__field--captcha' );<br /> }<br /> control.appendChild( input );<br /> if ( spec.type === 'password' ) {<br /> control.classList.add( 'kuke-auth__control--peek' );<br /> control.appendChild( passwordToggle( input ) );<br /> }<br /> row.appendChild( control );<br /> <br /> if ( spec.type === 'captcha' ) {<br /> var q = el( 'p', 'kuke-auth__captcha' );<br /> q.appendChild( el( 'span', 'kuke-auth__captcha-q', '正在获取…' ) );<br /> row.appendChild( q );<br /> form.captchaQuestion = q.firstChild;<br /> loadCaptcha().then( function ( data ) {<br /> if ( !form.isConnected ) {<br /> return;<br /> }<br /> captcha = data;<br /> q.firstChild.textContent = data ? data.question : '（暂不可用，请稍后重试）';<br /> } );<br /> }<br /> if ( spec.hint ) {<br /> row.appendChild( el( 'p', 'kuke-auth__hint', spec.hint ) );<br /> }<br /> return row;<br /> }<br /> <br /> function showAlert( text ) {<br /> if ( !alertEl ) {<br /> return;<br /> }<br /> alertEl.textContent = '';<br /> if ( !text ) {<br /> alertEl.hidden = true;<br /> return;<br /> }<br /> alertEl.appendChild( svg( ICONS.alert, 'kuke-auth__alert-icon' ) );<br /> alertEl.appendChild( el( 'span', null, text ) );<br /> alertEl.hidden = false;<br /> }<br /> <br /> function setSubmitting( btn, mode, on ) {<br /> submitting = on;<br /> btn.disabled = on;<br /> btn.classList.toggle( 'kuke-auth__submit--busy', on );<br /> btn.textContent = '';<br /> if ( on ) {<br /> btn.appendChild( el( 'span', 'kuke-auth__spinner' ) );<br /> btn.appendChild( el( 'span', null, MODES[ mode ].busy ) );<br /> } else {<br /> btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );<br /> }<br /> }<br /> <br /> function values( form ) {<br /> var out = {};<br /> Array.prototype.forEach.call( form.querySelectorAll( 'input' ), function ( i ) {<br /> out[ i.name ] = i.type === 'checkbox' ? ( i.checked ? '1' : '' ) : i.value;<br /> } );<br /> return out;<br /> }<br /> <br /> function submit( mode, form, btn ) {<br /> if ( submitting ) {<br /> return;<br /> }<br /> var v = values( form );<br /> if ( mode === 'signup' &amp;&amp; v.password !== v.retype ) {<br /> showAlert( '两次输入的密码不一致。' );<br /> return;<br /> }<br /> showAlert( '' );<br /> setSubmitting( btn, mode, true );<br /> <br /> var type = mode === 'login' ? 'login' : 'createaccount';<br /> ready().then( function () {<br /> return token( type );<br /> } ).then( function ( tk ) {<br /> var params;<br /> if ( mode === 'login' ) {<br /> params = {<br /> action: 'clientlogin',<br /> loginreturnurl: returnUrl(),<br /> logintoken: tk,<br /> username: v.username,<br /> password: v.password,<br /> formatversion: 2,<br /> errorformat: 'html',<br /> errorlang: 'zh'<br /> };<br /> if ( v.rememberMe ) {<br /> params.rememberMe = '1';<br /> }<br /> } else {<br /> params = {<br /> action: 'createaccount',<br /> createreturnurl: returnUrl(),<br /> createtoken: tk,<br /> username: v.username,<br /> password: v.password,<br /> retype: v.retype,<br /> formatversion: 2,<br /> errorformat: 'html',<br /> errorlang: 'zh'<br /> };<br /> if ( v.email ) {<br /> params.email = v.email;<br /> }<br /> if ( captcha ) {<br /> params.captchaId = captcha.id;<br /> params.captchaWord = v.captchaWord;<br /> }<br /> }<br /> return api.post( params );<br /> } ).then( function ( d ) {<br /> var res = d.clientlogin || d.createaccount || {};<br /> if ( res.status === 'PASS' ) {<br /> location.href = returnUrl();<br /> return;<br /> }<br /> // 需要额外步骤（如二次验证）时交给完整页面处理<br /> if ( res.status === 'UI' || res.status === 'REDIRECT' ) {<br /> location.href = mw.util.getUrl( MODES[ mode ].page, { returnto: returnTarget() } );<br /> return;<br /> }<br /> setSubmitting( btn, mode, false );<br /> showAlert( res.message || '提交失败，请稍后重试。' );<br /> // token 与验证码一次性，失败后重取<br /> delete tokens[ type ];<br /> if ( mode === 'signup' ) {<br /> refreshCaptcha( form );<br /> }<br /> } ).catch( function ( code, data ) {<br /> setSubmitting( btn, mode, false );<br /> var msg = ( data &amp;&amp; data.error &amp;&amp; data.error.info ) || '网络异常，请稍后重试。';<br /> showAlert( msg );<br /> delete tokens[ type ];<br /> } );<br /> }<br /> <br /> function refreshCaptcha( form ) {<br /> var q = form.captchaQuestion;<br /> if ( !q ) {<br /> return;<br /> }<br /> q.textContent = '正在获取…';<br /> loadCaptcha().then( function ( data ) {<br /> captcha = data;<br /> if ( q.isConnected ) {<br /> q.textContent = data ? data.question : '（暂不可用，请稍后重试）';<br /> }<br /> } );<br /> }<br /> <br /> function render( mode ) {<br /> if ( current === mode ) {<br /> return;<br /> }<br /> current = mode;<br /> captcha = null;<br /> <br /> titleEl.textContent = MODES[ mode ].title;<br /> subEl.textContent = MODES[ mode ].sub;<br /> Array.prototype.forEach.call( root.querySelectorAll( '.kuke-auth__tab' ), function ( b ) {<br /> var on = b.dataset.mode === mode;<br /> b.classList.toggle( 'kuke-auth__tab--active', on );<br /> b.setAttribute( 'aria-selected', on ? 'true' : 'false' );<br /> } );<br /> <br /> body.textContent = '';<br /> <br /> alertEl = el( 'div', 'kuke-auth__alert' );<br /> alertEl.setAttribute( 'role', 'alert' );<br /> alertEl.hidden = true;<br /> body.appendChild( alertEl );<br /> <br /> var form = el( 'form', 'kuke-auth__form' );<br /> form.setAttribute( 'novalidate', 'novalidate' );<br /> FIELDS[ mode ].forEach( function ( spec ) {<br /> form.appendChild( field( spec, form ) );<br /> } );<br /> <br /> var btn = el( 'button', 'kuke-auth__submit' );<br /> btn.type = 'submit';<br /> btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );<br /> form.appendChild( btn );<br /> <br /> form.addEventListener( 'submit', function ( e ) {<br /> e.preventDefault();<br /> submit( mode, form, btn );<br /> } );<br /> body.appendChild( form );<br /> <br /> var foot = el( 'p', 'kuke-auth__foot' );<br /> if ( mode === 'login' ) {<br /> var reset = el( 'a', null, '忘记密码？' );<br /> reset.href = mw.util.getUrl( 'Special:PasswordReset' );<br /> foot.appendChild( reset );<br /> foot.appendChild( el( 'span', 'kuke-auth__dot', '·' ) );<br /> var toSignup = el( 'a', null, '还没有账号？立即注册' );<br /> toSignup.href = '#';<br /> toSignup.addEventListener( 'click', function ( e ) {<br /> e.preventDefault();<br /> render( 'signup' );<br /> } );<br /> foot.appendChild( toSignup );<br /> } else {<br /> foot.appendChild( el( 'span', null, '已有账号？' ) );<br /> var toLogin = el( 'a', null, '直接登录' );<br /> toLogin.href = '#';<br /> toLogin.addEventListener( 'click', function ( e ) {<br /> e.preventDefault();<br /> render( 'login' );<br /> } );<br /> foot.appendChild( toLogin );<br /> }<br /> body.appendChild( foot );<br /> <br /> main.scrollTop = 0;<br /> // 预热对应的 token<br /> token( mode === 'login' ? 'login' : 'createaccount' );<br /> <br /> var first = form.querySelector( 'input' );<br /> if ( first ) {<br /> first.focus();<br /> }<br /> }<br /> <br /> /* ---------- 开关 ---------- */<br /> <br /> function onKey( e ) {<br /> if ( e.key === 'Escape' ) {<br /> close();<br /> return;<br /> }<br /> if ( e.key !== 'Tab' || root.hidden ) {<br /> return;<br /> }<br /> var items = root.querySelectorAll(<br /> 'a[href], button:not([disabled]), input:not([type=hidden]), select, textarea'<br /> );<br /> if ( !items.length ) {<br /> return;<br /> }<br /> var first = items[ 0 ];<br /> var last = items[ items.length - 1 ];<br /> if ( e.shiftKey &amp;&amp; document.activeElement === first ) {<br /> e.preventDefault();<br /> last.focus();<br /> } else if ( !e.shiftKey &amp;&amp; document.activeElement === last ) {<br /> e.preventDefault();<br /> first.focus();<br /> }<br /> }<br /> <br /> function open( mode ) {<br /> if ( !root ) {<br /> build();<br /> }<br /> lastFocus = document.activeElement;<br /> root.hidden = false;<br /> document.body.classList.add( 'kuke-auth-open' );<br /> document.addEventListener( 'keydown', onKey );<br /> render( mode );<br /> }<br /> <br /> function close() {<br /> if ( !root || root.hidden ) {<br /> return;<br /> }<br /> root.hidden = true;<br /> current = null;<br /> document.body.classList.remove( 'kuke-auth-open' );<br /> document.removeEventListener( 'keydown', onKey );<br /> if ( lastFocus &amp;&amp; lastFocus.focus ) {<br /> lastFocus.focus();<br /> }<br /> }<br /> <br /> function modeOf( href ) {<br /> var target;<br /> try {<br /> target = new URL( href, location.href );<br /> } catch ( e ) {<br /> return null;<br /> }<br /> if ( target.origin !== location.origin ) {<br /> return null;<br /> }<br /> var path = decodeURIComponent( target.pathname + '?' + target.search );<br /> if ( /Special:UserLogin|特殊:用户登录|Special:登录/i.test( path ) ) {<br /> return 'login';<br /> }<br /> if ( /Special:CreateAccount|特殊:创建账户|Special:创建账号/i.test( path ) ) {<br /> return 'signup';<br /> }<br /> return null;<br /> }<br /> <br /> function onClick( e ) {<br /> if ( e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) {<br /> return;<br /> }<br /> var a = e.target.closest ? e.target.closest( 'a[href]' ) : null;<br /> if ( !a || a.target === '_blank' ) {<br /> return;<br /> }<br /> var mode = modeOf( a.getAttribute( 'href' ) );<br /> if ( !mode ) {<br /> return;<br /> }<br /> e.preventDefault();<br /> open( mode );<br /> }<br /> <br /> function init() {<br /> if ( mw.config.get( 'wgUserName' ) ) {<br /> return;<br /> }<br /> document.addEventListener( 'click', onClick );<br /> // 后台预取登录 token，弹窗打开时表单已可直接提交<br /> token( 'login' );<br /> var direct = /[?&amp;]kukeauth=(login|signup)/.exec( location.search );<br /> if ( direct ) {<br /> open( direct[ 1 ] );<br /> }<br /> }<br /> <br /> if ( document.readyState === 'loading' ) {<br /> document.addEventListener( 'DOMContentLoaded', init );<br /> } else {<br /> init();<br /> }<br /> }() );<br /> /* 站内跳转加载动画。<br /> 只在「点链接 / 提交表单」触发的整页跳转时出现，首次进站不显示。<br /> 分级出现，秒开的页面不会闪：<br /> 80ms 顶部细进度条<br /> 150ms 全屏磨砂遮罩<br /> 动画画在离开前的旧页面上。浏览器收到新页面响应后会把旧页面冻结成静态画面，<br /> 所以遮罩一旦出现就把标记写进 sessionStorage，新页面在 &lt;head&gt; 里读到标记后<br /> 立刻用同一层遮罩接力（见 LocalSettings.php 的 BeforePageDisplay 钩子），<br /> 由本文件在页面可交互时摘掉，整段等待被完整盖住。 */<br /> ( function () {<br /> 'use strict';<br /> <br /> var BAR_DELAY = 80;<br /> var VEIL_DELAY = 150;<br /> var GIVE_UP = 20000;<br /> var RELAY_KEY = 'kukeLoad';<br /> var LOGO = 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png';<br /> <br /> var bar, veil, barTimer, veilTimer, creepTimer, giveUpTimer;<br /> var progress = 0;<br /> var running = false;<br /> <br /> function build() {<br /> if ( bar ) {<br /> return;<br /> }<br /> <br /> bar = document.createElement( 'div' );<br /> bar.className = 'kuke-load-bar';<br /> <br /> veil = document.createElement( 'div' );<br /> veil.className = 'kuke-load';<br /> veil.setAttribute( 'role', 'status' );<br /> veil.setAttribute( 'aria-live', 'polite' );<br /> veil.innerHTML =<br /> '&lt;div class=&quot;kuke-load__panel&quot;&gt;' +<br /> '&lt;div class=&quot;kuke-load__mark&quot;&gt;' +<br /> '&lt;div class=&quot;kuke-load__ring&quot;&gt;&lt;/div&gt;' +<br /> '&lt;img class=&quot;kuke-load__logo&quot; src=&quot;' + LOGO + '&quot; alt=&quot;&quot;&gt;' +<br /> '&lt;/div&gt;' +<br /> '&lt;p class=&quot;kuke-load__text&quot;&gt;正在加载' +<br /> '&lt;span class=&quot;kuke-load__dots&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;/span&gt;' +<br /> '&lt;/p&gt;' +<br /> '&lt;/div&gt;';<br /> <br /> document.body.appendChild( bar );<br /> document.body.appendChild( veil );<br /> }<br /> <br /> function setProgress( v ) {<br /> progress = v;<br /> bar.style.width = v + '%';<br /> }<br /> <br /> function creep() {<br /> // 无法预知真实进度，用递减步长向 92% 逼近，永不自行走满。<br /> creepTimer = setTimeout( function () {<br /> if ( !running ) {<br /> return;<br /> }<br /> setProgress( progress + ( 92 - progress ) * 0.12 );<br /> creep();<br /> }, 260 );<br /> }<br /> <br /> function start() {<br /> if ( running ) {<br /> return;<br /> }<br /> running = true;<br /> <br /> barTimer = setTimeout( function () {<br /> setProgress( 0 );<br /> bar.classList.add( 'is-on' );<br /> // 让 width:0 先落一帧，否则过渡不会触发。<br /> requestAnimationFrame( function () {<br /> setProgress( 28 );<br /> creep();<br /> } );<br /> }, BAR_DELAY );<br /> <br /> veilTimer = setTimeout( function () {<br /> veil.classList.add( 'is-on' );<br /> // 留给下一页的接力标记：浏览器随时会把本页冻结成静态画面，<br /> // 新页面读到它就在 &lt;head&gt; 阶段立刻铺上同一层遮罩，衔接无缝。<br /> try {<br /> sessionStorage.setItem( RELAY_KEY, '1' );<br /> } catch ( err ) {}<br /> }, VEIL_DELAY );<br /> <br /> giveUpTimer = setTimeout( stop, GIVE_UP );<br /> }<br /> <br /> function stop() {<br /> running = false;<br /> clearTimeout( barTimer );<br /> clearTimeout( veilTimer );<br /> clearTimeout( creepTimer );<br /> clearTimeout( giveUpTimer );<br /> // 跳转没走成（被取消、或按了返回），标记必须撤掉，<br /> // 否则下次进站会凭空接力出一层遮罩。<br /> try {<br /> sessionStorage.removeItem( RELAY_KEY );<br /> } catch ( err ) {}<br /> <br /> if ( !bar ) {<br /> return;<br /> }<br /> <br /> veil.classList.remove( 'is-on' );<br /> <br /> if ( bar.classList.contains( 'is-on' ) ) {<br /> setProgress( 100 );<br /> setTimeout( function () {<br /> if ( running ) {<br /> return;<br /> }<br /> bar.classList.remove( 'is-on' );<br /> setTimeout( function () {<br /> if ( !running ) {<br /> setProgress( 0 );<br /> }<br /> }, 220 );<br /> }, 180 );<br /> } else {<br /> setProgress( 0 );<br /> }<br /> }<br /> <br /> // 判断一次跳转是否值得加动画：必须是本站、会真正换页的整页导航。<br /> function shouldAnimate( url ) {<br /> if ( !url || url.origin !== location.origin ) {<br /> return false;<br /> }<br /> // 目标就是当前页 —— 页内锚点（含 href=&quot;#&quot;、跳到内容、回到顶部），不换页。<br /> if (<br /> url.pathname === location.pathname &amp;&amp;<br /> url.search === location.search<br /> ) {<br /> return false;<br /> }<br /> return true;<br /> }<br /> <br /> function onClick( e ) {<br /> if (<br /> e.defaultPrevented ||<br /> e.button !== 0 ||<br /> e.metaKey || e.ctrlKey || e.shiftKey || e.altKey<br /> ) {<br /> return;<br /> }<br /> <br /> var a = e.target.closest ? e.target.closest( 'a[href]' ) : null;<br /> if ( !a || a.hasAttribute( 'download' ) ) {<br /> return;<br /> }<br /> if ( a.target &amp;&amp; a.target !== '' &amp;&amp; a.target !== '_self' ) {<br /> return;<br /> }<br /> // 站内导航才有意义；协议不是 http(s) 的（mailto: / javascript: 等）跳过。<br /> if ( a.protocol !== 'http:' &amp;&amp; a.protocol !== 'https:' ) {<br /> return;<br /> }<br /> // 由脚本接管的交互控件（弹窗、抽屉、折叠等）不是跳转。<br /> if ( a.getAttribute( 'role' ) === 'button' || a.closest( '.kuke-auth' ) ) {<br /> return;<br /> }<br /> <br /> var url;<br /> try {<br /> url = new URL( a.href );<br /> } catch ( err ) {<br /> return;<br /> }<br /> <br /> if ( shouldAnimate( url ) ) {<br /> start();<br /> }<br /> }<br /> <br /> function onSubmit( e ) {<br /> if ( e.defaultPrevented ) {<br /> return;<br /> }<br /> <br /> var form = e.target;<br /> if ( !form || form.target === '_blank' || form.closest( '.kuke-auth' ) ) {<br /> return;<br /> }<br /> <br /> var url;<br /> try {<br /> url = new URL( form.action || location.href, location.href );<br /> } catch ( err ) {<br /> return;<br /> }<br /> <br /> if ( url.origin === location.origin ) {<br /> start();<br /> }<br /> }<br /> <br /> // 收掉上一页交接过来的那层遮罩。等两帧再淡出，确保新页面已经真的画出内容。<br /> function dropRelay() {<br /> var html = document.documentElement;<br /> if ( !html.classList.contains( 'kuke-relay' ) ) {<br /> return;<br /> }<br /> requestAnimationFrame( function () {<br /> requestAnimationFrame( function () {<br /> html.classList.add( 'kuke-relay-off' );<br /> setTimeout( function () {<br /> html.classList.remove( 'kuke-relay', 'kuke-relay-off' );<br /> }, 240 );<br /> } );<br /> } );<br /> }<br /> <br /> function init() {<br /> dropRelay();<br /> <br /> // 提前建好节点：跳转发生时只切 class，不做 DOM 构建，<br /> // 也让遮罩的图片在空闲时就下载完，真要出现时不会白一下。<br /> build();<br /> <br /> // 注册在 bubble 阶段、且晚于本文件其它监听器，<br /> // 于是弹窗等调用过 preventDefault() 的交互能被 defaultPrevented 过滤掉。<br /> document.addEventListener( 'click', onClick );<br /> document.addEventListener( 'submit', onSubmit );<br /> <br /> // 返回上一页（含 bfcache 复原）时必须收掉，否则旧遮罩会留在画面上。<br /> window.addEventListener( 'pageshow', stop );<br /> // 跳转被用户按 Esc 取消时也收掉。<br /> document.addEventListener( 'keydown', function ( e ) {<br /> if ( e.key === 'Escape' &amp;&amp; running ) {<br /> stop();<br /> }<br /> } );<br /> }<br /> <br /> if ( document.readyState === 'loading' ) {<br /> document.addEventListener( 'DOMContentLoaded', init );<br /> } else {<br /> init();<br /> }<br /> }() );</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=230 2026-08-20T12:12:40Z

<p>Kuke：​加载动画：时序前移 + 跨页接力遮罩</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> /* 主导航 active 态：由 body class 驱动（服务端直出，无 JS 依赖） */<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;],<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;],<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;],<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;],<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;],<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;],<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:visited,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:visited,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:visited,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:visited,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:visited,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]::after,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]::after,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]::after,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]::after,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]::after,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:hover,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:hover,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:hover,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:hover,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:hover,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:hover,<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:focus,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:focus,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:focus,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:focus,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:focus,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav__link::after,<br /> .citizen-header-position-right .kuke-nav__link::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }<br /> /* ==========================================================================<br /> 24. 站内跳转加载动画<br /> 分两级出现，避免「秒进」的页面被闪一下：<br /> ≥ 110ms 顶部细进度条（轻量提示，几乎无感）<br /> ≥ 320ms 全屏磨砂遮罩 + Logo 环形动画（真正在等的时候才出现）<br /> 动画挂在「正在离开的那一页」上：浏览器会保留旧页面的画面，直到新页面<br /> 绘制第一帧，所以这层遮罩正好盖住整段白屏等待，新页面一出现即自然消失。<br /> -------------------------------------------------------------------------- */<br /> <br /> :root {<br /> --kuke-load-bg: rgb( 248 250 252 / 0.84 );<br /> --kuke-load-fg: #475569;<br /> --kuke-load-track: rgb( 15 23 42 / 0.07 );<br /> --kuke-load-halo: rgb( 14 165 233 / 0.16 );<br /> }<br /> <br /> /* ---- 顶部进度条 ---- */<br /> <br /> .kuke-load-bar {<br /> position: fixed;<br /> inset-block-start: 0;<br /> inset-inline-start: 0;<br /> z-index: 2001;<br /> width: 0;<br /> height: 3px;<br /> border-end-end-radius: 3px;<br /> background: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand-strong, #0284c7 ),<br /> var( --kuke-brand, #0ea5e9 ) 55%,<br /> var( --kuke-brand-light, #7dd3fc )<br /> );<br /> box-shadow: 0 0 10px rgb( 14 165 233 / 0.55 );<br /> opacity: 0;<br /> pointer-events: none;<br /> transition:<br /> width 0.24s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> opacity 0.2s linear;<br /> }<br /> <br /> .kuke-load-bar.is-on {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 全屏遮罩 ---- */<br /> <br /> .kuke-load {<br /> position: fixed;<br /> inset: 0;<br /> z-index: 2000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> background: var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> opacity: 0;<br /> visibility: hidden;<br /> pointer-events: none;<br /> transition:<br /> opacity 0.24s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> visibility 0s linear 0.24s;<br /> }<br /> <br /> .kuke-load.is-on {<br /> opacity: 1;<br /> visibility: visible;<br /> pointer-events: auto;<br /> transition-delay: 0s;<br /> }<br /> <br /> .kuke-load__panel {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 1.25rem;<br /> opacity: 0;<br /> transform: translateY( 10px ) scale( 0.96 );<br /> transition:<br /> opacity 0.32s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ) 0.04s,<br /> transform 0.32s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ) 0.04s;<br /> }<br /> <br /> .kuke-load.is-on .kuke-load__panel {<br /> opacity: 1;<br /> transform: none;<br /> }<br /> <br /> /* ---- Logo + 环形指示器 ---- */<br /> <br /> .kuke-load__mark {<br /> position: relative;<br /> display: grid;<br /> place-items: center;<br /> width: 92px;<br /> height: 92px;<br /> }<br /> <br /> /* 静态底环 */<br /> .kuke-load__mark::before {<br /> content: '';<br /> position: absolute;<br /> inset: 0;<br /> border: 3px solid var( --kuke-load-track );<br /> border-radius: 50%;<br /> }<br /> <br /> /* 背后的柔光，给遮罩一点层次 */<br /> .kuke-load__mark::after {<br /> content: '';<br /> position: absolute;<br /> inset: -18px;<br /> border-radius: 50%;<br /> background: radial-gradient( circle, var( --kuke-load-halo ), transparent 68% );<br /> animation: kuke-load-halo 2.4s ease-in-out infinite;<br /> pointer-events: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> position: absolute;<br /> inset: 0;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> animation: kuke-load-spin 0.85s linear infinite;<br /> }<br /> <br /> .kuke-load__logo {<br /> position: relative;<br /> width: 54px;<br /> height: 54px;<br /> border-radius: 15px;<br /> box-shadow: var( --kuke-shadow-brand, 0 6px 16px rgb( 2 132 199 / 0.28 ) );<br /> animation: kuke-load-breathe 1.8s ease-in-out infinite;<br /> }<br /> <br /> /* ---- 文案 ---- */<br /> <br /> .kuke-load__text {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.15em;<br /> margin: 0;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> letter-spacing: 0.03em;<br /> color: var( --kuke-load-fg );<br /> }<br /> <br /> .kuke-load__dots {<br /> display: inline-flex;<br /> gap: 3px;<br /> }<br /> <br /> .kuke-load__dots i {<br /> width: 3px;<br /> height: 3px;<br /> border-radius: 50%;<br /> background: currentcolor;<br /> opacity: 0.25;<br /> animation: kuke-load-dot 1.2s ease-in-out infinite;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 2 ) {<br /> animation-delay: 0.16s;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 3 ) {<br /> animation-delay: 0.32s;<br /> }<br /> <br /> /* ---- 关键帧 ---- */<br /> <br /> @keyframes kuke-load-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-breathe {<br /> 0%,<br /> 100% {<br /> transform: scale( 1 );<br /> }<br /> <br /> 50% {<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-halo {<br /> 0%,<br /> 100% {<br /> opacity: 0.55;<br /> transform: scale( 0.92 );<br /> }<br /> <br /> 50% {<br /> opacity: 1;<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-dot {<br /> 0%,<br /> 60%,<br /> 100% {<br /> opacity: 0.25;<br /> transform: translateY( 0 );<br /> }<br /> <br /> 30% {<br /> opacity: 1;<br /> transform: translateY( -3px );<br /> }<br /> }<br /> <br /> /* ---- 接力遮罩 ----<br /> 浏览器收到新页面响应后，会把旧页面冻结成一张静态画面，旧页面上的动画随之<br /> 停住；这段静止最长可到数百毫秒。所以新页面在 &lt;head&gt; 里读到上一页留下的<br /> 标记时，立刻用这两个伪元素铺出同一层遮罩接住，等首帧画完再淡出。<br /> 写成伪元素是因为此刻 &lt;body&gt; 还没被解析出来，插不了真实节点。 */<br /> <br /> html.kuke-relay::before,<br /> html.kuke-relay::after {<br /> content: '';<br /> position: fixed;<br /> z-index: 2000;<br /> pointer-events: none;<br /> transition: opacity 0.2s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );<br /> }<br /> <br /> /* 磨砂底 + 居中的 Logo */<br /> html.kuke-relay::before {<br /> inset: 0;<br /> background:<br /> url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' )<br /> center / 54px 54px no-repeat,<br /> var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> }<br /> <br /> /* 环形指示器：尺寸与 .kuke-load__mark 一致，视觉上完全接得上 */<br /> html.kuke-relay::after {<br /> inset-block-start: 50%;<br /> inset-inline-start: 50%;<br /> width: 92px;<br /> height: 92px;<br /> margin: -46px 0 0 -46px;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> /* 第二条动画是兜底：万一脚本没能摘掉遮罩，6s 后自行让开，绝不锁死页面 */<br /> animation:<br /> kuke-load-spin 0.85s linear infinite,<br /> kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay::before {<br /> animation: kuke-relay-bail 0.01s linear 6s forwards;<br /> }<br /> <br /> html.kuke-relay-off::before,<br /> html.kuke-relay-off::after {<br /> opacity: 0;<br /> }<br /> <br /> @keyframes kuke-relay-bail {<br /> to {<br /> opacity: 0;<br /> visibility: hidden;<br /> }<br /> }<br /> <br /> /* ---- 暗色 ---- */<br /> <br /> html.skin-theme-clientpref-night,<br /> html.skin-theme-clientpref-black {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> }<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1 {<br /> --kuke-load-bg: rgb( 0 0 0 / 0.86 );<br /> }<br /> <br /> /* ---- 降低动态效果 ---- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-load__ring,<br /> .kuke-load__logo,<br /> .kuke-load__mark::after,<br /> .kuke-load__dots i {<br /> animation: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-load__panel {<br /> transition: none;<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Common.js&diff=229 2026-08-20T11:58:08Z

<p>Kuke：​加载动画：节点提前构建</p> <hr /> <div>/* 横版登录 / 注册弹窗。<br /> 表单在本地直接渲染（不再抓取 Special 页面的 HTML），提交走 Action API<br /> clientlogin / createaccount，token 在页面加载时就后台预取，<br /> 因此弹窗打开即可用，没有等待。<br /> 独立页面 Special:UserLogin / Special:CreateAccount 保留，无 JS 时仍可用。 */<br /> ( function () {<br /> 'use strict';<br /> <br /> var LOGO = 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png';<br /> <br /> var MODES = {<br /> login: {<br /> page: 'Special:UserLogin',<br /> tab: '登录',<br /> title: '登录到 Kuke Wiki',<br /> sub: '登录后即可编辑条目、参与讨论并同步个人偏好设置。',<br /> submit: '登录',<br /> busy: '正在登录…'<br /> },<br /> signup: {<br /> page: 'Special:CreateAccount',<br /> tab: '注册',<br /> title: '创建账号',<br /> sub: '加入 KukeMC 官方百科的编辑与维护，只需一分钟。',<br /> submit: '创建账号',<br /> busy: '正在创建…'<br /> }<br /> };<br /> <br /> var FIELDS = {<br /> login: [<br /> { name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },<br /> { name: 'password', label: '密码', type: 'password', autocomplete: 'current-password', required: true },<br /> { name: 'rememberMe', label: '在此浏览器上保持登录', type: 'checkbox' }<br /> ],<br /> signup: [<br /> { name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },<br /> { name: 'password', label: '密码', type: 'password', autocomplete: 'new-password', required: true },<br /> { name: 'retype', label: '确认密码', type: 'password', autocomplete: 'new-password', required: true },<br /> { name: 'email', label: '电子邮件', type: 'email', autocomplete: 'email', hint: '选填，用于找回密码' },<br /> { name: 'captchaWord', label: '验证码', type: 'captcha', required: true }<br /> ]<br /> };<br /> <br /> var POINTS = [<br /> { icon: 'pencil', text: '编辑与创建条目，完善服务器资料' },<br /> { icon: 'chat', text: '参与讨论页，与其他编辑者协作' },<br /> { icon: 'star', text: '保存个人偏好、监视列表与编辑历史' },<br /> { icon: 'clock', text: '追踪最近更改，第一时间了解更新' }<br /> ];<br /> <br /> var ICONS = {<br /> pencil: 'M13.5 2.5a2.12 2.12 0 0 1 3 3L7 15l-4 1 1-4Z',<br /> chat: 'M3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v7a1.5 1.5 0 0 1-1.5 1.5H8l-4 3v-3h-.5A1.5 1.5 0 0 1 3 12.5Z',<br /> star: 'm10 2.6 2.3 4.66 5.15.75-3.72 3.63.88 5.12L10 14.34l-4.6 2.42.87-5.12L2.55 8l5.15-.75Z',<br /> clock: 'M10 2.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Zm0 3.6v4.2l3 1.8',<br /> close: 'M5 5l10 10M15 5L5 15',<br /> eye: 'M1.8 10S4.9 4.7 10 4.7 18.2 10 18.2 10 15.1 15.3 10 15.3 1.8 10 1.8 10Zm8.2 2.2a2.2 2.2 0 1 0 0-4.4 2.2 2.2 0 0 0 0 4.4Z',<br /> eyeOff: 'M3 3l14 14M8.2 8.3A2.2 2.2 0 0 0 10 12.2c.6 0 1.1-.2 1.6-.6M6.1 6.2C3.6 7.6 1.8 10 1.8 10s3.1 5.3 8.2 5.3c1.4 0 2.6-.4 3.7-1M15.5 13C17.3 11.8 18.2 10 18.2 10S15.1 4.7 10 4.7c-.7 0-1.4.1-2 .3',<br /> alert: 'M10 6.6v4.2m0 2.6h.01M8.6 3.2 2.2 14.4A1.6 1.6 0 0 0 3.6 16.8h12.8a1.6 1.6 0 0 0 1.4-2.4L11.4 3.2a1.6 1.6 0 0 0-2.8 0Z'<br /> };<br /> <br /> var root = null;<br /> var main = null;<br /> var body = null;<br /> var titleEl = null;<br /> var subEl = null;<br /> var alertEl = null;<br /> var lastFocus = null;<br /> var current = null;<br /> var api = null;<br /> var apiReady = null;<br /> var tokens = {};<br /> var captcha = null;<br /> var submitting = false;<br /> <br /> function svg( d, cls, size ) {<br /> var s = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );<br /> s.setAttribute( 'viewBox', '0 0 20 20' );<br /> s.setAttribute( 'width', size || '18' );<br /> s.setAttribute( 'height', size || '18' );<br /> s.setAttribute( 'aria-hidden', 'true' );<br /> s.setAttribute( 'fill', 'none' );<br /> s.setAttribute( 'stroke', 'currentColor' );<br /> s.setAttribute( 'stroke-width', '1.6' );<br /> s.setAttribute( 'stroke-linecap', 'round' );<br /> s.setAttribute( 'stroke-linejoin', 'round' );<br /> if ( cls ) {<br /> s.setAttribute( 'class', cls );<br /> }<br /> var p = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );<br /> p.setAttribute( 'd', d );<br /> s.appendChild( p );<br /> return s;<br /> }<br /> <br /> function el( tag, cls, text ) {<br /> var n = document.createElement( tag );<br /> if ( cls ) {<br /> n.className = cls;<br /> }<br /> if ( text ) {<br /> n.textContent = text;<br /> }<br /> return n;<br /> }<br /> <br /> function returnTarget() {<br /> var page = mw.config.get( 'wgPageName' );<br /> if ( /^Special:(UserLogin|CreateAccount|UserLogout)$/i.test( page ) ) {<br /> return mw.config.get( 'wgMainPageTitle' ) || '首页';<br /> }<br /> return page;<br /> }<br /> <br /> function returnUrl() {<br /> return location.origin + mw.util.getUrl( returnTarget() );<br /> }<br /> <br /> /* ---------- API ---------- */<br /> <br /> function ready() {<br /> if ( !apiReady ) {<br /> apiReady = mw.loader.using( [ 'mediawiki.api', 'mediawiki.util' ] ).then( function () {<br /> api = new mw.Api();<br /> return api;<br /> } );<br /> }<br /> return apiReady;<br /> }<br /> <br /> function token( type ) {<br /> if ( tokens[ type ] ) {<br /> return tokens[ type ];<br /> }<br /> tokens[ type ] = ready().then( function () {<br /> return api.get( {<br /> action: 'query',<br /> meta: 'tokens',<br /> type: type,<br /> formatversion: 2<br /> } );<br /> } ).then( function ( d ) {<br /> return d.query.tokens[ type + 'token' ];<br /> } );<br /> return tokens[ type ];<br /> }<br /> <br /> /* QuestyCaptcha 的题面与 id，每次进入注册态重新取（旧 id 会失效） */<br /> function loadCaptcha() {<br /> return ready().then( function () {<br /> return api.get( {<br /> action: 'query',<br /> meta: 'authmanagerinfo',<br /> amirequestsfor: 'create',<br /> formatversion: 2<br /> } );<br /> } ).then( function ( d ) {<br /> var reqs = ( d.query &amp;&amp; d.query.authmanagerinfo &amp;&amp; d.query.authmanagerinfo.requests ) || [];<br /> var hit = null;<br /> reqs.forEach( function ( r ) {<br /> if ( r.id &amp;&amp; r.id.indexOf( 'Captcha' ) !== -1 &amp;&amp; r.fields &amp;&amp; r.fields.captchaId ) {<br /> hit = r;<br /> }<br /> } );<br /> if ( !hit ) {<br /> return null;<br /> }<br /> return {<br /> id: hit.fields.captchaId.value,<br /> question: hit.fields.captchaInfo ? hit.fields.captchaInfo.value : '',<br /> label: ( hit.fields.captchaWord &amp;&amp; hit.fields.captchaWord.label ) || '验证码'<br /> };<br /> } ).catch( function () {<br /> return null;<br /> } );<br /> }<br /> <br /> /* ---------- 结构 ---------- */<br /> <br /> function build() {<br /> root = el( 'div', 'kuke-auth' );<br /> root.hidden = true;<br /> <br /> var backdrop = el( 'div', 'kuke-auth__backdrop' );<br /> backdrop.addEventListener( 'click', close );<br /> root.appendChild( backdrop );<br /> <br /> var dialog = el( 'div', 'kuke-auth__dialog' );<br /> dialog.setAttribute( 'role', 'dialog' );<br /> dialog.setAttribute( 'aria-modal', 'true' );<br /> dialog.setAttribute( 'aria-labelledby', 'kuke-auth-title' );<br /> <br /> var closeBtn = el( 'button', 'kuke-auth__close' );<br /> closeBtn.type = 'button';<br /> closeBtn.setAttribute( 'aria-label', '关闭' );<br /> closeBtn.appendChild( svg( ICONS.close ) );<br /> closeBtn.addEventListener( 'click', close );<br /> dialog.appendChild( closeBtn );<br /> <br /> // 左：品牌栏<br /> var aside = el( 'aside', 'kuke-auth__aside' );<br /> var logo = el( 'img', 'kuke-auth__logo' );<br /> logo.src = LOGO;<br /> logo.alt = '';<br /> logo.width = 44;<br /> logo.height = 44;<br /> aside.appendChild( logo );<br /> aside.appendChild( el( 'p', 'kuke-auth__brand', 'Kuke Wiki' ) );<br /> aside.appendChild( el( 'p', 'kuke-auth__tagline', 'KukeMC 群组服官方百科' ) );<br /> <br /> var ul = el( 'ul', 'kuke-auth__points' );<br /> POINTS.forEach( function ( item ) {<br /> var li = el( 'li', 'kuke-auth__point' );<br /> li.appendChild( svg( ICONS[ item.icon ], 'kuke-auth__point-icon' ) );<br /> li.appendChild( el( 'span', null, item.text ) );<br /> ul.appendChild( li );<br /> } );<br /> aside.appendChild( ul );<br /> aside.appendChild( el( 'p', 'kuke-auth__note', '本站内容由社区共同维护，欢迎参与。' ) );<br /> dialog.appendChild( aside );<br /> <br /> // 右：表单栏<br /> main = el( 'div', 'kuke-auth__main' );<br /> <br /> var head = el( 'div', 'kuke-auth__head' );<br /> var tabs = el( 'div', 'kuke-auth__tabs' );<br /> tabs.setAttribute( 'role', 'tablist' );<br /> Object.keys( MODES ).forEach( function ( key ) {<br /> var b = el( 'button', 'kuke-auth__tab', MODES[ key ].tab );<br /> b.type = 'button';<br /> b.dataset.mode = key;<br /> b.setAttribute( 'role', 'tab' );<br /> b.addEventListener( 'click', function () {<br /> render( key );<br /> } );<br /> tabs.appendChild( b );<br /> } );<br /> head.appendChild( tabs );<br /> <br /> titleEl = el( 'h2', 'kuke-auth__title' );<br /> titleEl.id = 'kuke-auth-title';<br /> head.appendChild( titleEl );<br /> subEl = el( 'p', 'kuke-auth__sub' );<br /> head.appendChild( subEl );<br /> main.appendChild( head );<br /> <br /> body = el( 'div', 'kuke-auth__body' );<br /> main.appendChild( body );<br /> dialog.appendChild( main );<br /> <br /> root.appendChild( dialog );<br /> document.body.appendChild( root );<br /> }<br /> <br /> /* ---------- 表单 ---------- */<br /> <br /> function passwordToggle( input ) {<br /> var btn = el( 'button', 'kuke-auth__peek' );<br /> btn.type = 'button';<br /> btn.setAttribute( 'aria-label', '显示密码' );<br /> btn.appendChild( svg( ICONS.eye, null, '17' ) );<br /> btn.addEventListener( 'click', function () {<br /> var show = input.type === 'password';<br /> input.type = show ? 'text' : 'password';<br /> btn.setAttribute( 'aria-label', show ? '隐藏密码' : '显示密码' );<br /> btn.textContent = '';<br /> btn.appendChild( svg( show ? ICONS.eyeOff : ICONS.eye, null, '17' ) );<br /> input.focus();<br /> } );<br /> return btn;<br /> }<br /> <br /> function field( spec, form ) {<br /> if ( spec.type === 'checkbox' ) {<br /> var wrap = el( 'label', 'kuke-auth__check' );<br /> var box = el( 'input' );<br /> box.type = 'checkbox';<br /> box.name = spec.name;<br /> wrap.appendChild( box );<br /> wrap.appendChild( el( 'span', null, spec.label ) );<br /> return wrap;<br /> }<br /> <br /> var id = 'kuke-auth-' + spec.name;<br /> var row = el( 'div', 'kuke-auth__field' );<br /> var label = el( 'label', 'kuke-auth__label', spec.label );<br /> label.htmlFor = id;<br /> if ( !spec.required ) {<br /> label.appendChild( el( 'span', 'kuke-auth__optional', '选填' ) );<br /> }<br /> row.appendChild( label );<br /> <br /> var control = el( 'div', 'kuke-auth__control' );<br /> var input = el( 'input', 'kuke-auth__input' );<br /> input.id = id;<br /> input.name = spec.name;<br /> input.type = spec.type === 'captcha' ? 'text' : spec.type;<br /> if ( spec.autocomplete ) {<br /> input.autocomplete = spec.autocomplete;<br /> }<br /> if ( spec.required ) {<br /> input.required = true;<br /> }<br /> if ( spec.type === 'captcha' ) {<br /> input.autocomplete = 'off';<br /> input.inputMode = 'text';<br /> row.classList.add( 'kuke-auth__field--captcha' );<br /> }<br /> control.appendChild( input );<br /> if ( spec.type === 'password' ) {<br /> control.classList.add( 'kuke-auth__control--peek' );<br /> control.appendChild( passwordToggle( input ) );<br /> }<br /> row.appendChild( control );<br /> <br /> if ( spec.type === 'captcha' ) {<br /> var q = el( 'p', 'kuke-auth__captcha' );<br /> q.appendChild( el( 'span', 'kuke-auth__captcha-q', '正在获取…' ) );<br /> row.appendChild( q );<br /> form.captchaQuestion = q.firstChild;<br /> loadCaptcha().then( function ( data ) {<br /> if ( !form.isConnected ) {<br /> return;<br /> }<br /> captcha = data;<br /> q.firstChild.textContent = data ? data.question : '（暂不可用，请稍后重试）';<br /> } );<br /> }<br /> if ( spec.hint ) {<br /> row.appendChild( el( 'p', 'kuke-auth__hint', spec.hint ) );<br /> }<br /> return row;<br /> }<br /> <br /> function showAlert( text ) {<br /> if ( !alertEl ) {<br /> return;<br /> }<br /> alertEl.textContent = '';<br /> if ( !text ) {<br /> alertEl.hidden = true;<br /> return;<br /> }<br /> alertEl.appendChild( svg( ICONS.alert, 'kuke-auth__alert-icon' ) );<br /> alertEl.appendChild( el( 'span', null, text ) );<br /> alertEl.hidden = false;<br /> }<br /> <br /> function setSubmitting( btn, mode, on ) {<br /> submitting = on;<br /> btn.disabled = on;<br /> btn.classList.toggle( 'kuke-auth__submit--busy', on );<br /> btn.textContent = '';<br /> if ( on ) {<br /> btn.appendChild( el( 'span', 'kuke-auth__spinner' ) );<br /> btn.appendChild( el( 'span', null, MODES[ mode ].busy ) );<br /> } else {<br /> btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );<br /> }<br /> }<br /> <br /> function values( form ) {<br /> var out = {};<br /> Array.prototype.forEach.call( form.querySelectorAll( 'input' ), function ( i ) {<br /> out[ i.name ] = i.type === 'checkbox' ? ( i.checked ? '1' : '' ) : i.value;<br /> } );<br /> return out;<br /> }<br /> <br /> function submit( mode, form, btn ) {<br /> if ( submitting ) {<br /> return;<br /> }<br /> var v = values( form );<br /> if ( mode === 'signup' &amp;&amp; v.password !== v.retype ) {<br /> showAlert( '两次输入的密码不一致。' );<br /> return;<br /> }<br /> showAlert( '' );<br /> setSubmitting( btn, mode, true );<br /> <br /> var type = mode === 'login' ? 'login' : 'createaccount';<br /> ready().then( function () {<br /> return token( type );<br /> } ).then( function ( tk ) {<br /> var params;<br /> if ( mode === 'login' ) {<br /> params = {<br /> action: 'clientlogin',<br /> loginreturnurl: returnUrl(),<br /> logintoken: tk,<br /> username: v.username,<br /> password: v.password,<br /> formatversion: 2,<br /> errorformat: 'html',<br /> errorlang: 'zh'<br /> };<br /> if ( v.rememberMe ) {<br /> params.rememberMe = '1';<br /> }<br /> } else {<br /> params = {<br /> action: 'createaccount',<br /> createreturnurl: returnUrl(),<br /> createtoken: tk,<br /> username: v.username,<br /> password: v.password,<br /> retype: v.retype,<br /> formatversion: 2,<br /> errorformat: 'html',<br /> errorlang: 'zh'<br /> };<br /> if ( v.email ) {<br /> params.email = v.email;<br /> }<br /> if ( captcha ) {<br /> params.captchaId = captcha.id;<br /> params.captchaWord = v.captchaWord;<br /> }<br /> }<br /> return api.post( params );<br /> } ).then( function ( d ) {<br /> var res = d.clientlogin || d.createaccount || {};<br /> if ( res.status === 'PASS' ) {<br /> location.href = returnUrl();<br /> return;<br /> }<br /> // 需要额外步骤（如二次验证）时交给完整页面处理<br /> if ( res.status === 'UI' || res.status === 'REDIRECT' ) {<br /> location.href = mw.util.getUrl( MODES[ mode ].page, { returnto: returnTarget() } );<br /> return;<br /> }<br /> setSubmitting( btn, mode, false );<br /> showAlert( res.message || '提交失败，请稍后重试。' );<br /> // token 与验证码一次性，失败后重取<br /> delete tokens[ type ];<br /> if ( mode === 'signup' ) {<br /> refreshCaptcha( form );<br /> }<br /> } ).catch( function ( code, data ) {<br /> setSubmitting( btn, mode, false );<br /> var msg = ( data &amp;&amp; data.error &amp;&amp; data.error.info ) || '网络异常，请稍后重试。';<br /> showAlert( msg );<br /> delete tokens[ type ];<br /> } );<br /> }<br /> <br /> function refreshCaptcha( form ) {<br /> var q = form.captchaQuestion;<br /> if ( !q ) {<br /> return;<br /> }<br /> q.textContent = '正在获取…';<br /> loadCaptcha().then( function ( data ) {<br /> captcha = data;<br /> if ( q.isConnected ) {<br /> q.textContent = data ? data.question : '（暂不可用，请稍后重试）';<br /> }<br /> } );<br /> }<br /> <br /> function render( mode ) {<br /> if ( current === mode ) {<br /> return;<br /> }<br /> current = mode;<br /> captcha = null;<br /> <br /> titleEl.textContent = MODES[ mode ].title;<br /> subEl.textContent = MODES[ mode ].sub;<br /> Array.prototype.forEach.call( root.querySelectorAll( '.kuke-auth__tab' ), function ( b ) {<br /> var on = b.dataset.mode === mode;<br /> b.classList.toggle( 'kuke-auth__tab--active', on );<br /> b.setAttribute( 'aria-selected', on ? 'true' : 'false' );<br /> } );<br /> <br /> body.textContent = '';<br /> <br /> alertEl = el( 'div', 'kuke-auth__alert' );<br /> alertEl.setAttribute( 'role', 'alert' );<br /> alertEl.hidden = true;<br /> body.appendChild( alertEl );<br /> <br /> var form = el( 'form', 'kuke-auth__form' );<br /> form.setAttribute( 'novalidate', 'novalidate' );<br /> FIELDS[ mode ].forEach( function ( spec ) {<br /> form.appendChild( field( spec, form ) );<br /> } );<br /> <br /> var btn = el( 'button', 'kuke-auth__submit' );<br /> btn.type = 'submit';<br /> btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );<br /> form.appendChild( btn );<br /> <br /> form.addEventListener( 'submit', function ( e ) {<br /> e.preventDefault();<br /> submit( mode, form, btn );<br /> } );<br /> body.appendChild( form );<br /> <br /> var foot = el( 'p', 'kuke-auth__foot' );<br /> if ( mode === 'login' ) {<br /> var reset = el( 'a', null, '忘记密码？' );<br /> reset.href = mw.util.getUrl( 'Special:PasswordReset' );<br /> foot.appendChild( reset );<br /> foot.appendChild( el( 'span', 'kuke-auth__dot', '·' ) );<br /> var toSignup = el( 'a', null, '还没有账号？立即注册' );<br /> toSignup.href = '#';<br /> toSignup.addEventListener( 'click', function ( e ) {<br /> e.preventDefault();<br /> render( 'signup' );<br /> } );<br /> foot.appendChild( toSignup );<br /> } else {<br /> foot.appendChild( el( 'span', null, '已有账号？' ) );<br /> var toLogin = el( 'a', null, '直接登录' );<br /> toLogin.href = '#';<br /> toLogin.addEventListener( 'click', function ( e ) {<br /> e.preventDefault();<br /> render( 'login' );<br /> } );<br /> foot.appendChild( toLogin );<br /> }<br /> body.appendChild( foot );<br /> <br /> main.scrollTop = 0;<br /> // 预热对应的 token<br /> token( mode === 'login' ? 'login' : 'createaccount' );<br /> <br /> var first = form.querySelector( 'input' );<br /> if ( first ) {<br /> first.focus();<br /> }<br /> }<br /> <br /> /* ---------- 开关 ---------- */<br /> <br /> function onKey( e ) {<br /> if ( e.key === 'Escape' ) {<br /> close();<br /> return;<br /> }<br /> if ( e.key !== 'Tab' || root.hidden ) {<br /> return;<br /> }<br /> var items = root.querySelectorAll(<br /> 'a[href], button:not([disabled]), input:not([type=hidden]), select, textarea'<br /> );<br /> if ( !items.length ) {<br /> return;<br /> }<br /> var first = items[ 0 ];<br /> var last = items[ items.length - 1 ];<br /> if ( e.shiftKey &amp;&amp; document.activeElement === first ) {<br /> e.preventDefault();<br /> last.focus();<br /> } else if ( !e.shiftKey &amp;&amp; document.activeElement === last ) {<br /> e.preventDefault();<br /> first.focus();<br /> }<br /> }<br /> <br /> function open( mode ) {<br /> if ( !root ) {<br /> build();<br /> }<br /> lastFocus = document.activeElement;<br /> root.hidden = false;<br /> document.body.classList.add( 'kuke-auth-open' );<br /> document.addEventListener( 'keydown', onKey );<br /> render( mode );<br /> }<br /> <br /> function close() {<br /> if ( !root || root.hidden ) {<br /> return;<br /> }<br /> root.hidden = true;<br /> current = null;<br /> document.body.classList.remove( 'kuke-auth-open' );<br /> document.removeEventListener( 'keydown', onKey );<br /> if ( lastFocus &amp;&amp; lastFocus.focus ) {<br /> lastFocus.focus();<br /> }<br /> }<br /> <br /> function modeOf( href ) {<br /> var target;<br /> try {<br /> target = new URL( href, location.href );<br /> } catch ( e ) {<br /> return null;<br /> }<br /> if ( target.origin !== location.origin ) {<br /> return null;<br /> }<br /> var path = decodeURIComponent( target.pathname + '?' + target.search );<br /> if ( /Special:UserLogin|特殊:用户登录|Special:登录/i.test( path ) ) {<br /> return 'login';<br /> }<br /> if ( /Special:CreateAccount|特殊:创建账户|Special:创建账号/i.test( path ) ) {<br /> return 'signup';<br /> }<br /> return null;<br /> }<br /> <br /> function onClick( e ) {<br /> if ( e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) {<br /> return;<br /> }<br /> var a = e.target.closest ? e.target.closest( 'a[href]' ) : null;<br /> if ( !a || a.target === '_blank' ) {<br /> return;<br /> }<br /> var mode = modeOf( a.getAttribute( 'href' ) );<br /> if ( !mode ) {<br /> return;<br /> }<br /> e.preventDefault();<br /> open( mode );<br /> }<br /> <br /> function init() {<br /> if ( mw.config.get( 'wgUserName' ) ) {<br /> return;<br /> }<br /> document.addEventListener( 'click', onClick );<br /> // 后台预取登录 token，弹窗打开时表单已可直接提交<br /> token( 'login' );<br /> var direct = /[?&amp;]kukeauth=(login|signup)/.exec( location.search );<br /> if ( direct ) {<br /> open( direct[ 1 ] );<br /> }<br /> }<br /> <br /> if ( document.readyState === 'loading' ) {<br /> document.addEventListener( 'DOMContentLoaded', init );<br /> } else {<br /> init();<br /> }<br /> }() );<br /> /* 站内跳转加载动画。<br /> 只在「点链接 / 提交表单」触发的整页跳转时出现，首次进站不显示。<br /> 分级出现，秒开的页面不会闪：<br /> 110ms 顶部细进度条<br /> 320ms 全屏磨砂遮罩<br /> 动画画在离开前的旧页面上，浏览器会保留旧画面直到新页面绘制第一帧，<br /> 所以遮罩正好盖住整段等待，新页面出现即消失。 */<br /> ( function () {<br /> 'use strict';<br /> <br /> var BAR_DELAY = 110;<br /> var VEIL_DELAY = 320;<br /> var GIVE_UP = 20000;<br /> var LOGO = 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png';<br /> <br /> var bar, veil, barTimer, veilTimer, creepTimer, giveUpTimer;<br /> var progress = 0;<br /> var running = false;<br /> <br /> function build() {<br /> if ( bar ) {<br /> return;<br /> }<br /> <br /> bar = document.createElement( 'div' );<br /> bar.className = 'kuke-load-bar';<br /> <br /> veil = document.createElement( 'div' );<br /> veil.className = 'kuke-load';<br /> veil.setAttribute( 'role', 'status' );<br /> veil.setAttribute( 'aria-live', 'polite' );<br /> veil.innerHTML =<br /> '&lt;div class=&quot;kuke-load__panel&quot;&gt;' +<br /> '&lt;div class=&quot;kuke-load__mark&quot;&gt;' +<br /> '&lt;div class=&quot;kuke-load__ring&quot;&gt;&lt;/div&gt;' +<br /> '&lt;img class=&quot;kuke-load__logo&quot; src=&quot;' + LOGO + '&quot; alt=&quot;&quot;&gt;' +<br /> '&lt;/div&gt;' +<br /> '&lt;p class=&quot;kuke-load__text&quot;&gt;正在加载' +<br /> '&lt;span class=&quot;kuke-load__dots&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;/span&gt;' +<br /> '&lt;/p&gt;' +<br /> '&lt;/div&gt;';<br /> <br /> document.body.appendChild( bar );<br /> document.body.appendChild( veil );<br /> }<br /> <br /> function setProgress( v ) {<br /> progress = v;<br /> bar.style.width = v + '%';<br /> }<br /> <br /> function creep() {<br /> // 无法预知真实进度，用递减步长向 92% 逼近，永不自行走满。<br /> creepTimer = setTimeout( function () {<br /> if ( !running ) {<br /> return;<br /> }<br /> setProgress( progress + ( 92 - progress ) * 0.12 );<br /> creep();<br /> }, 260 );<br /> }<br /> <br /> function start() {<br /> if ( running ) {<br /> return;<br /> }<br /> running = true;<br /> <br /> barTimer = setTimeout( function () {<br /> setProgress( 0 );<br /> bar.classList.add( 'is-on' );<br /> // 让 width:0 先落一帧，否则过渡不会触发。<br /> requestAnimationFrame( function () {<br /> setProgress( 28 );<br /> creep();<br /> } );<br /> }, BAR_DELAY );<br /> <br /> veilTimer = setTimeout( function () {<br /> veil.classList.add( 'is-on' );<br /> }, VEIL_DELAY );<br /> <br /> giveUpTimer = setTimeout( stop, GIVE_UP );<br /> }<br /> <br /> function stop() {<br /> running = false;<br /> clearTimeout( barTimer );<br /> clearTimeout( veilTimer );<br /> clearTimeout( creepTimer );<br /> clearTimeout( giveUpTimer );<br /> <br /> if ( !bar ) {<br /> return;<br /> }<br /> <br /> veil.classList.remove( 'is-on' );<br /> <br /> if ( bar.classList.contains( 'is-on' ) ) {<br /> setProgress( 100 );<br /> setTimeout( function () {<br /> if ( running ) {<br /> return;<br /> }<br /> bar.classList.remove( 'is-on' );<br /> setTimeout( function () {<br /> if ( !running ) {<br /> setProgress( 0 );<br /> }<br /> }, 220 );<br /> }, 180 );<br /> } else {<br /> setProgress( 0 );<br /> }<br /> }<br /> <br /> // 判断一次跳转是否值得加动画：必须是本站、会真正换页的整页导航。<br /> function shouldAnimate( url ) {<br /> if ( !url || url.origin !== location.origin ) {<br /> return false;<br /> }<br /> // 目标就是当前页 —— 页内锚点（含 href=&quot;#&quot;、跳到内容、回到顶部），不换页。<br /> if (<br /> url.pathname === location.pathname &amp;&amp;<br /> url.search === location.search<br /> ) {<br /> return false;<br /> }<br /> return true;<br /> }<br /> <br /> function onClick( e ) {<br /> if (<br /> e.defaultPrevented ||<br /> e.button !== 0 ||<br /> e.metaKey || e.ctrlKey || e.shiftKey || e.altKey<br /> ) {<br /> return;<br /> }<br /> <br /> var a = e.target.closest ? e.target.closest( 'a[href]' ) : null;<br /> if ( !a || a.hasAttribute( 'download' ) ) {<br /> return;<br /> }<br /> if ( a.target &amp;&amp; a.target !== '' &amp;&amp; a.target !== '_self' ) {<br /> return;<br /> }<br /> // 站内导航才有意义；协议不是 http(s) 的（mailto: / javascript: 等）跳过。<br /> if ( a.protocol !== 'http:' &amp;&amp; a.protocol !== 'https:' ) {<br /> return;<br /> }<br /> // 由脚本接管的交互控件（弹窗、抽屉、折叠等）不是跳转。<br /> if ( a.getAttribute( 'role' ) === 'button' || a.closest( '.kuke-auth' ) ) {<br /> return;<br /> }<br /> <br /> var url;<br /> try {<br /> url = new URL( a.href );<br /> } catch ( err ) {<br /> return;<br /> }<br /> <br /> if ( shouldAnimate( url ) ) {<br /> start();<br /> }<br /> }<br /> <br /> function onSubmit( e ) {<br /> if ( e.defaultPrevented ) {<br /> return;<br /> }<br /> <br /> var form = e.target;<br /> if ( !form || form.target === '_blank' || form.closest( '.kuke-auth' ) ) {<br /> return;<br /> }<br /> <br /> var url;<br /> try {<br /> url = new URL( form.action || location.href, location.href );<br /> } catch ( err ) {<br /> return;<br /> }<br /> <br /> if ( url.origin === location.origin ) {<br /> start();<br /> }<br /> }<br /> <br /> function init() {<br /> // 提前建好节点：跳转发生时只切 class，不做 DOM 构建，<br /> // 也让遮罩的图片在空闲时就下载完，真要出现时不会白一下。<br /> build();<br /> <br /> // 注册在 bubble 阶段、且晚于本文件其它监听器，<br /> // 于是弹窗等调用过 preventDefault() 的交互能被 defaultPrevented 过滤掉。<br /> document.addEventListener( 'click', onClick );<br /> document.addEventListener( 'submit', onSubmit );<br /> <br /> // 返回上一页（含 bfcache 复原）时必须收掉，否则旧遮罩会留在画面上。<br /> window.addEventListener( 'pageshow', stop );<br /> // 跳转被用户按 Esc 取消时也收掉。<br /> document.addEventListener( 'keydown', function ( e ) {<br /> if ( e.key === 'Escape' &amp;&amp; running ) {<br /> stop();<br /> }<br /> } );<br /> }<br /> <br /> if ( document.readyState === 'loading' ) {<br /> document.addEventListener( 'DOMContentLoaded', init );<br /> } else {<br /> init();<br /> }<br /> }() );</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Common.js&diff=228 2026-08-20T11:56:04Z

<p>Kuke：​加入站内跳转加载动画脚本</p> <hr /> <div>/* 横版登录 / 注册弹窗。<br /> 表单在本地直接渲染（不再抓取 Special 页面的 HTML），提交走 Action API<br /> clientlogin / createaccount，token 在页面加载时就后台预取，<br /> 因此弹窗打开即可用，没有等待。<br /> 独立页面 Special:UserLogin / Special:CreateAccount 保留，无 JS 时仍可用。 */<br /> ( function () {<br /> 'use strict';<br /> <br /> var LOGO = 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png';<br /> <br /> var MODES = {<br /> login: {<br /> page: 'Special:UserLogin',<br /> tab: '登录',<br /> title: '登录到 Kuke Wiki',<br /> sub: '登录后即可编辑条目、参与讨论并同步个人偏好设置。',<br /> submit: '登录',<br /> busy: '正在登录…'<br /> },<br /> signup: {<br /> page: 'Special:CreateAccount',<br /> tab: '注册',<br /> title: '创建账号',<br /> sub: '加入 KukeMC 官方百科的编辑与维护，只需一分钟。',<br /> submit: '创建账号',<br /> busy: '正在创建…'<br /> }<br /> };<br /> <br /> var FIELDS = {<br /> login: [<br /> { name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },<br /> { name: 'password', label: '密码', type: 'password', autocomplete: 'current-password', required: true },<br /> { name: 'rememberMe', label: '在此浏览器上保持登录', type: 'checkbox' }<br /> ],<br /> signup: [<br /> { name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },<br /> { name: 'password', label: '密码', type: 'password', autocomplete: 'new-password', required: true },<br /> { name: 'retype', label: '确认密码', type: 'password', autocomplete: 'new-password', required: true },<br /> { name: 'email', label: '电子邮件', type: 'email', autocomplete: 'email', hint: '选填，用于找回密码' },<br /> { name: 'captchaWord', label: '验证码', type: 'captcha', required: true }<br /> ]<br /> };<br /> <br /> var POINTS = [<br /> { icon: 'pencil', text: '编辑与创建条目，完善服务器资料' },<br /> { icon: 'chat', text: '参与讨论页，与其他编辑者协作' },<br /> { icon: 'star', text: '保存个人偏好、监视列表与编辑历史' },<br /> { icon: 'clock', text: '追踪最近更改，第一时间了解更新' }<br /> ];<br /> <br /> var ICONS = {<br /> pencil: 'M13.5 2.5a2.12 2.12 0 0 1 3 3L7 15l-4 1 1-4Z',<br /> chat: 'M3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v7a1.5 1.5 0 0 1-1.5 1.5H8l-4 3v-3h-.5A1.5 1.5 0 0 1 3 12.5Z',<br /> star: 'm10 2.6 2.3 4.66 5.15.75-3.72 3.63.88 5.12L10 14.34l-4.6 2.42.87-5.12L2.55 8l5.15-.75Z',<br /> clock: 'M10 2.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Zm0 3.6v4.2l3 1.8',<br /> close: 'M5 5l10 10M15 5L5 15',<br /> eye: 'M1.8 10S4.9 4.7 10 4.7 18.2 10 18.2 10 15.1 15.3 10 15.3 1.8 10 1.8 10Zm8.2 2.2a2.2 2.2 0 1 0 0-4.4 2.2 2.2 0 0 0 0 4.4Z',<br /> eyeOff: 'M3 3l14 14M8.2 8.3A2.2 2.2 0 0 0 10 12.2c.6 0 1.1-.2 1.6-.6M6.1 6.2C3.6 7.6 1.8 10 1.8 10s3.1 5.3 8.2 5.3c1.4 0 2.6-.4 3.7-1M15.5 13C17.3 11.8 18.2 10 18.2 10S15.1 4.7 10 4.7c-.7 0-1.4.1-2 .3',<br /> alert: 'M10 6.6v4.2m0 2.6h.01M8.6 3.2 2.2 14.4A1.6 1.6 0 0 0 3.6 16.8h12.8a1.6 1.6 0 0 0 1.4-2.4L11.4 3.2a1.6 1.6 0 0 0-2.8 0Z'<br /> };<br /> <br /> var root = null;<br /> var main = null;<br /> var body = null;<br /> var titleEl = null;<br /> var subEl = null;<br /> var alertEl = null;<br /> var lastFocus = null;<br /> var current = null;<br /> var api = null;<br /> var apiReady = null;<br /> var tokens = {};<br /> var captcha = null;<br /> var submitting = false;<br /> <br /> function svg( d, cls, size ) {<br /> var s = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );<br /> s.setAttribute( 'viewBox', '0 0 20 20' );<br /> s.setAttribute( 'width', size || '18' );<br /> s.setAttribute( 'height', size || '18' );<br /> s.setAttribute( 'aria-hidden', 'true' );<br /> s.setAttribute( 'fill', 'none' );<br /> s.setAttribute( 'stroke', 'currentColor' );<br /> s.setAttribute( 'stroke-width', '1.6' );<br /> s.setAttribute( 'stroke-linecap', 'round' );<br /> s.setAttribute( 'stroke-linejoin', 'round' );<br /> if ( cls ) {<br /> s.setAttribute( 'class', cls );<br /> }<br /> var p = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );<br /> p.setAttribute( 'd', d );<br /> s.appendChild( p );<br /> return s;<br /> }<br /> <br /> function el( tag, cls, text ) {<br /> var n = document.createElement( tag );<br /> if ( cls ) {<br /> n.className = cls;<br /> }<br /> if ( text ) {<br /> n.textContent = text;<br /> }<br /> return n;<br /> }<br /> <br /> function returnTarget() {<br /> var page = mw.config.get( 'wgPageName' );<br /> if ( /^Special:(UserLogin|CreateAccount|UserLogout)$/i.test( page ) ) {<br /> return mw.config.get( 'wgMainPageTitle' ) || '首页';<br /> }<br /> return page;<br /> }<br /> <br /> function returnUrl() {<br /> return location.origin + mw.util.getUrl( returnTarget() );<br /> }<br /> <br /> /* ---------- API ---------- */<br /> <br /> function ready() {<br /> if ( !apiReady ) {<br /> apiReady = mw.loader.using( [ 'mediawiki.api', 'mediawiki.util' ] ).then( function () {<br /> api = new mw.Api();<br /> return api;<br /> } );<br /> }<br /> return apiReady;<br /> }<br /> <br /> function token( type ) {<br /> if ( tokens[ type ] ) {<br /> return tokens[ type ];<br /> }<br /> tokens[ type ] = ready().then( function () {<br /> return api.get( {<br /> action: 'query',<br /> meta: 'tokens',<br /> type: type,<br /> formatversion: 2<br /> } );<br /> } ).then( function ( d ) {<br /> return d.query.tokens[ type + 'token' ];<br /> } );<br /> return tokens[ type ];<br /> }<br /> <br /> /* QuestyCaptcha 的题面与 id，每次进入注册态重新取（旧 id 会失效） */<br /> function loadCaptcha() {<br /> return ready().then( function () {<br /> return api.get( {<br /> action: 'query',<br /> meta: 'authmanagerinfo',<br /> amirequestsfor: 'create',<br /> formatversion: 2<br /> } );<br /> } ).then( function ( d ) {<br /> var reqs = ( d.query &amp;&amp; d.query.authmanagerinfo &amp;&amp; d.query.authmanagerinfo.requests ) || [];<br /> var hit = null;<br /> reqs.forEach( function ( r ) {<br /> if ( r.id &amp;&amp; r.id.indexOf( 'Captcha' ) !== -1 &amp;&amp; r.fields &amp;&amp; r.fields.captchaId ) {<br /> hit = r;<br /> }<br /> } );<br /> if ( !hit ) {<br /> return null;<br /> }<br /> return {<br /> id: hit.fields.captchaId.value,<br /> question: hit.fields.captchaInfo ? hit.fields.captchaInfo.value : '',<br /> label: ( hit.fields.captchaWord &amp;&amp; hit.fields.captchaWord.label ) || '验证码'<br /> };<br /> } ).catch( function () {<br /> return null;<br /> } );<br /> }<br /> <br /> /* ---------- 结构 ---------- */<br /> <br /> function build() {<br /> root = el( 'div', 'kuke-auth' );<br /> root.hidden = true;<br /> <br /> var backdrop = el( 'div', 'kuke-auth__backdrop' );<br /> backdrop.addEventListener( 'click', close );<br /> root.appendChild( backdrop );<br /> <br /> var dialog = el( 'div', 'kuke-auth__dialog' );<br /> dialog.setAttribute( 'role', 'dialog' );<br /> dialog.setAttribute( 'aria-modal', 'true' );<br /> dialog.setAttribute( 'aria-labelledby', 'kuke-auth-title' );<br /> <br /> var closeBtn = el( 'button', 'kuke-auth__close' );<br /> closeBtn.type = 'button';<br /> closeBtn.setAttribute( 'aria-label', '关闭' );<br /> closeBtn.appendChild( svg( ICONS.close ) );<br /> closeBtn.addEventListener( 'click', close );<br /> dialog.appendChild( closeBtn );<br /> <br /> // 左：品牌栏<br /> var aside = el( 'aside', 'kuke-auth__aside' );<br /> var logo = el( 'img', 'kuke-auth__logo' );<br /> logo.src = LOGO;<br /> logo.alt = '';<br /> logo.width = 44;<br /> logo.height = 44;<br /> aside.appendChild( logo );<br /> aside.appendChild( el( 'p', 'kuke-auth__brand', 'Kuke Wiki' ) );<br /> aside.appendChild( el( 'p', 'kuke-auth__tagline', 'KukeMC 群组服官方百科' ) );<br /> <br /> var ul = el( 'ul', 'kuke-auth__points' );<br /> POINTS.forEach( function ( item ) {<br /> var li = el( 'li', 'kuke-auth__point' );<br /> li.appendChild( svg( ICONS[ item.icon ], 'kuke-auth__point-icon' ) );<br /> li.appendChild( el( 'span', null, item.text ) );<br /> ul.appendChild( li );<br /> } );<br /> aside.appendChild( ul );<br /> aside.appendChild( el( 'p', 'kuke-auth__note', '本站内容由社区共同维护，欢迎参与。' ) );<br /> dialog.appendChild( aside );<br /> <br /> // 右：表单栏<br /> main = el( 'div', 'kuke-auth__main' );<br /> <br /> var head = el( 'div', 'kuke-auth__head' );<br /> var tabs = el( 'div', 'kuke-auth__tabs' );<br /> tabs.setAttribute( 'role', 'tablist' );<br /> Object.keys( MODES ).forEach( function ( key ) {<br /> var b = el( 'button', 'kuke-auth__tab', MODES[ key ].tab );<br /> b.type = 'button';<br /> b.dataset.mode = key;<br /> b.setAttribute( 'role', 'tab' );<br /> b.addEventListener( 'click', function () {<br /> render( key );<br /> } );<br /> tabs.appendChild( b );<br /> } );<br /> head.appendChild( tabs );<br /> <br /> titleEl = el( 'h2', 'kuke-auth__title' );<br /> titleEl.id = 'kuke-auth-title';<br /> head.appendChild( titleEl );<br /> subEl = el( 'p', 'kuke-auth__sub' );<br /> head.appendChild( subEl );<br /> main.appendChild( head );<br /> <br /> body = el( 'div', 'kuke-auth__body' );<br /> main.appendChild( body );<br /> dialog.appendChild( main );<br /> <br /> root.appendChild( dialog );<br /> document.body.appendChild( root );<br /> }<br /> <br /> /* ---------- 表单 ---------- */<br /> <br /> function passwordToggle( input ) {<br /> var btn = el( 'button', 'kuke-auth__peek' );<br /> btn.type = 'button';<br /> btn.setAttribute( 'aria-label', '显示密码' );<br /> btn.appendChild( svg( ICONS.eye, null, '17' ) );<br /> btn.addEventListener( 'click', function () {<br /> var show = input.type === 'password';<br /> input.type = show ? 'text' : 'password';<br /> btn.setAttribute( 'aria-label', show ? '隐藏密码' : '显示密码' );<br /> btn.textContent = '';<br /> btn.appendChild( svg( show ? ICONS.eyeOff : ICONS.eye, null, '17' ) );<br /> input.focus();<br /> } );<br /> return btn;<br /> }<br /> <br /> function field( spec, form ) {<br /> if ( spec.type === 'checkbox' ) {<br /> var wrap = el( 'label', 'kuke-auth__check' );<br /> var box = el( 'input' );<br /> box.type = 'checkbox';<br /> box.name = spec.name;<br /> wrap.appendChild( box );<br /> wrap.appendChild( el( 'span', null, spec.label ) );<br /> return wrap;<br /> }<br /> <br /> var id = 'kuke-auth-' + spec.name;<br /> var row = el( 'div', 'kuke-auth__field' );<br /> var label = el( 'label', 'kuke-auth__label', spec.label );<br /> label.htmlFor = id;<br /> if ( !spec.required ) {<br /> label.appendChild( el( 'span', 'kuke-auth__optional', '选填' ) );<br /> }<br /> row.appendChild( label );<br /> <br /> var control = el( 'div', 'kuke-auth__control' );<br /> var input = el( 'input', 'kuke-auth__input' );<br /> input.id = id;<br /> input.name = spec.name;<br /> input.type = spec.type === 'captcha' ? 'text' : spec.type;<br /> if ( spec.autocomplete ) {<br /> input.autocomplete = spec.autocomplete;<br /> }<br /> if ( spec.required ) {<br /> input.required = true;<br /> }<br /> if ( spec.type === 'captcha' ) {<br /> input.autocomplete = 'off';<br /> input.inputMode = 'text';<br /> row.classList.add( 'kuke-auth__field--captcha' );<br /> }<br /> control.appendChild( input );<br /> if ( spec.type === 'password' ) {<br /> control.classList.add( 'kuke-auth__control--peek' );<br /> control.appendChild( passwordToggle( input ) );<br /> }<br /> row.appendChild( control );<br /> <br /> if ( spec.type === 'captcha' ) {<br /> var q = el( 'p', 'kuke-auth__captcha' );<br /> q.appendChild( el( 'span', 'kuke-auth__captcha-q', '正在获取…' ) );<br /> row.appendChild( q );<br /> form.captchaQuestion = q.firstChild;<br /> loadCaptcha().then( function ( data ) {<br /> if ( !form.isConnected ) {<br /> return;<br /> }<br /> captcha = data;<br /> q.firstChild.textContent = data ? data.question : '（暂不可用，请稍后重试）';<br /> } );<br /> }<br /> if ( spec.hint ) {<br /> row.appendChild( el( 'p', 'kuke-auth__hint', spec.hint ) );<br /> }<br /> return row;<br /> }<br /> <br /> function showAlert( text ) {<br /> if ( !alertEl ) {<br /> return;<br /> }<br /> alertEl.textContent = '';<br /> if ( !text ) {<br /> alertEl.hidden = true;<br /> return;<br /> }<br /> alertEl.appendChild( svg( ICONS.alert, 'kuke-auth__alert-icon' ) );<br /> alertEl.appendChild( el( 'span', null, text ) );<br /> alertEl.hidden = false;<br /> }<br /> <br /> function setSubmitting( btn, mode, on ) {<br /> submitting = on;<br /> btn.disabled = on;<br /> btn.classList.toggle( 'kuke-auth__submit--busy', on );<br /> btn.textContent = '';<br /> if ( on ) {<br /> btn.appendChild( el( 'span', 'kuke-auth__spinner' ) );<br /> btn.appendChild( el( 'span', null, MODES[ mode ].busy ) );<br /> } else {<br /> btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );<br /> }<br /> }<br /> <br /> function values( form ) {<br /> var out = {};<br /> Array.prototype.forEach.call( form.querySelectorAll( 'input' ), function ( i ) {<br /> out[ i.name ] = i.type === 'checkbox' ? ( i.checked ? '1' : '' ) : i.value;<br /> } );<br /> return out;<br /> }<br /> <br /> function submit( mode, form, btn ) {<br /> if ( submitting ) {<br /> return;<br /> }<br /> var v = values( form );<br /> if ( mode === 'signup' &amp;&amp; v.password !== v.retype ) {<br /> showAlert( '两次输入的密码不一致。' );<br /> return;<br /> }<br /> showAlert( '' );<br /> setSubmitting( btn, mode, true );<br /> <br /> var type = mode === 'login' ? 'login' : 'createaccount';<br /> ready().then( function () {<br /> return token( type );<br /> } ).then( function ( tk ) {<br /> var params;<br /> if ( mode === 'login' ) {<br /> params = {<br /> action: 'clientlogin',<br /> loginreturnurl: returnUrl(),<br /> logintoken: tk,<br /> username: v.username,<br /> password: v.password,<br /> formatversion: 2,<br /> errorformat: 'html',<br /> errorlang: 'zh'<br /> };<br /> if ( v.rememberMe ) {<br /> params.rememberMe = '1';<br /> }<br /> } else {<br /> params = {<br /> action: 'createaccount',<br /> createreturnurl: returnUrl(),<br /> createtoken: tk,<br /> username: v.username,<br /> password: v.password,<br /> retype: v.retype,<br /> formatversion: 2,<br /> errorformat: 'html',<br /> errorlang: 'zh'<br /> };<br /> if ( v.email ) {<br /> params.email = v.email;<br /> }<br /> if ( captcha ) {<br /> params.captchaId = captcha.id;<br /> params.captchaWord = v.captchaWord;<br /> }<br /> }<br /> return api.post( params );<br /> } ).then( function ( d ) {<br /> var res = d.clientlogin || d.createaccount || {};<br /> if ( res.status === 'PASS' ) {<br /> location.href = returnUrl();<br /> return;<br /> }<br /> // 需要额外步骤（如二次验证）时交给完整页面处理<br /> if ( res.status === 'UI' || res.status === 'REDIRECT' ) {<br /> location.href = mw.util.getUrl( MODES[ mode ].page, { returnto: returnTarget() } );<br /> return;<br /> }<br /> setSubmitting( btn, mode, false );<br /> showAlert( res.message || '提交失败，请稍后重试。' );<br /> // token 与验证码一次性，失败后重取<br /> delete tokens[ type ];<br /> if ( mode === 'signup' ) {<br /> refreshCaptcha( form );<br /> }<br /> } ).catch( function ( code, data ) {<br /> setSubmitting( btn, mode, false );<br /> var msg = ( data &amp;&amp; data.error &amp;&amp; data.error.info ) || '网络异常，请稍后重试。';<br /> showAlert( msg );<br /> delete tokens[ type ];<br /> } );<br /> }<br /> <br /> function refreshCaptcha( form ) {<br /> var q = form.captchaQuestion;<br /> if ( !q ) {<br /> return;<br /> }<br /> q.textContent = '正在获取…';<br /> loadCaptcha().then( function ( data ) {<br /> captcha = data;<br /> if ( q.isConnected ) {<br /> q.textContent = data ? data.question : '（暂不可用，请稍后重试）';<br /> }<br /> } );<br /> }<br /> <br /> function render( mode ) {<br /> if ( current === mode ) {<br /> return;<br /> }<br /> current = mode;<br /> captcha = null;<br /> <br /> titleEl.textContent = MODES[ mode ].title;<br /> subEl.textContent = MODES[ mode ].sub;<br /> Array.prototype.forEach.call( root.querySelectorAll( '.kuke-auth__tab' ), function ( b ) {<br /> var on = b.dataset.mode === mode;<br /> b.classList.toggle( 'kuke-auth__tab--active', on );<br /> b.setAttribute( 'aria-selected', on ? 'true' : 'false' );<br /> } );<br /> <br /> body.textContent = '';<br /> <br /> alertEl = el( 'div', 'kuke-auth__alert' );<br /> alertEl.setAttribute( 'role', 'alert' );<br /> alertEl.hidden = true;<br /> body.appendChild( alertEl );<br /> <br /> var form = el( 'form', 'kuke-auth__form' );<br /> form.setAttribute( 'novalidate', 'novalidate' );<br /> FIELDS[ mode ].forEach( function ( spec ) {<br /> form.appendChild( field( spec, form ) );<br /> } );<br /> <br /> var btn = el( 'button', 'kuke-auth__submit' );<br /> btn.type = 'submit';<br /> btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );<br /> form.appendChild( btn );<br /> <br /> form.addEventListener( 'submit', function ( e ) {<br /> e.preventDefault();<br /> submit( mode, form, btn );<br /> } );<br /> body.appendChild( form );<br /> <br /> var foot = el( 'p', 'kuke-auth__foot' );<br /> if ( mode === 'login' ) {<br /> var reset = el( 'a', null, '忘记密码？' );<br /> reset.href = mw.util.getUrl( 'Special:PasswordReset' );<br /> foot.appendChild( reset );<br /> foot.appendChild( el( 'span', 'kuke-auth__dot', '·' ) );<br /> var toSignup = el( 'a', null, '还没有账号？立即注册' );<br /> toSignup.href = '#';<br /> toSignup.addEventListener( 'click', function ( e ) {<br /> e.preventDefault();<br /> render( 'signup' );<br /> } );<br /> foot.appendChild( toSignup );<br /> } else {<br /> foot.appendChild( el( 'span', null, '已有账号？' ) );<br /> var toLogin = el( 'a', null, '直接登录' );<br /> toLogin.href = '#';<br /> toLogin.addEventListener( 'click', function ( e ) {<br /> e.preventDefault();<br /> render( 'login' );<br /> } );<br /> foot.appendChild( toLogin );<br /> }<br /> body.appendChild( foot );<br /> <br /> main.scrollTop = 0;<br /> // 预热对应的 token<br /> token( mode === 'login' ? 'login' : 'createaccount' );<br /> <br /> var first = form.querySelector( 'input' );<br /> if ( first ) {<br /> first.focus();<br /> }<br /> }<br /> <br /> /* ---------- 开关 ---------- */<br /> <br /> function onKey( e ) {<br /> if ( e.key === 'Escape' ) {<br /> close();<br /> return;<br /> }<br /> if ( e.key !== 'Tab' || root.hidden ) {<br /> return;<br /> }<br /> var items = root.querySelectorAll(<br /> 'a[href], button:not([disabled]), input:not([type=hidden]), select, textarea'<br /> );<br /> if ( !items.length ) {<br /> return;<br /> }<br /> var first = items[ 0 ];<br /> var last = items[ items.length - 1 ];<br /> if ( e.shiftKey &amp;&amp; document.activeElement === first ) {<br /> e.preventDefault();<br /> last.focus();<br /> } else if ( !e.shiftKey &amp;&amp; document.activeElement === last ) {<br /> e.preventDefault();<br /> first.focus();<br /> }<br /> }<br /> <br /> function open( mode ) {<br /> if ( !root ) {<br /> build();<br /> }<br /> lastFocus = document.activeElement;<br /> root.hidden = false;<br /> document.body.classList.add( 'kuke-auth-open' );<br /> document.addEventListener( 'keydown', onKey );<br /> render( mode );<br /> }<br /> <br /> function close() {<br /> if ( !root || root.hidden ) {<br /> return;<br /> }<br /> root.hidden = true;<br /> current = null;<br /> document.body.classList.remove( 'kuke-auth-open' );<br /> document.removeEventListener( 'keydown', onKey );<br /> if ( lastFocus &amp;&amp; lastFocus.focus ) {<br /> lastFocus.focus();<br /> }<br /> }<br /> <br /> function modeOf( href ) {<br /> var target;<br /> try {<br /> target = new URL( href, location.href );<br /> } catch ( e ) {<br /> return null;<br /> }<br /> if ( target.origin !== location.origin ) {<br /> return null;<br /> }<br /> var path = decodeURIComponent( target.pathname + '?' + target.search );<br /> if ( /Special:UserLogin|特殊:用户登录|Special:登录/i.test( path ) ) {<br /> return 'login';<br /> }<br /> if ( /Special:CreateAccount|特殊:创建账户|Special:创建账号/i.test( path ) ) {<br /> return 'signup';<br /> }<br /> return null;<br /> }<br /> <br /> function onClick( e ) {<br /> if ( e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) {<br /> return;<br /> }<br /> var a = e.target.closest ? e.target.closest( 'a[href]' ) : null;<br /> if ( !a || a.target === '_blank' ) {<br /> return;<br /> }<br /> var mode = modeOf( a.getAttribute( 'href' ) );<br /> if ( !mode ) {<br /> return;<br /> }<br /> e.preventDefault();<br /> open( mode );<br /> }<br /> <br /> function init() {<br /> if ( mw.config.get( 'wgUserName' ) ) {<br /> return;<br /> }<br /> document.addEventListener( 'click', onClick );<br /> // 后台预取登录 token，弹窗打开时表单已可直接提交<br /> token( 'login' );<br /> var direct = /[?&amp;]kukeauth=(login|signup)/.exec( location.search );<br /> if ( direct ) {<br /> open( direct[ 1 ] );<br /> }<br /> }<br /> <br /> if ( document.readyState === 'loading' ) {<br /> document.addEventListener( 'DOMContentLoaded', init );<br /> } else {<br /> init();<br /> }<br /> }() );<br /> /* 站内跳转加载动画。<br /> 只在「点链接 / 提交表单」触发的整页跳转时出现，首次进站不显示。<br /> 分级出现，秒开的页面不会闪：<br /> 110ms 顶部细进度条<br /> 320ms 全屏磨砂遮罩<br /> 动画画在离开前的旧页面上，浏览器会保留旧画面直到新页面绘制第一帧，<br /> 所以遮罩正好盖住整段等待，新页面出现即消失。 */<br /> ( function () {<br /> 'use strict';<br /> <br /> var BAR_DELAY = 110;<br /> var VEIL_DELAY = 320;<br /> var GIVE_UP = 20000;<br /> var LOGO = 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png';<br /> <br /> var bar, veil, barTimer, veilTimer, creepTimer, giveUpTimer;<br /> var progress = 0;<br /> var running = false;<br /> <br /> function build() {<br /> if ( bar ) {<br /> return;<br /> }<br /> <br /> bar = document.createElement( 'div' );<br /> bar.className = 'kuke-load-bar';<br /> <br /> veil = document.createElement( 'div' );<br /> veil.className = 'kuke-load';<br /> veil.setAttribute( 'role', 'status' );<br /> veil.setAttribute( 'aria-live', 'polite' );<br /> veil.innerHTML =<br /> '&lt;div class=&quot;kuke-load__panel&quot;&gt;' +<br /> '&lt;div class=&quot;kuke-load__mark&quot;&gt;' +<br /> '&lt;div class=&quot;kuke-load__ring&quot;&gt;&lt;/div&gt;' +<br /> '&lt;img class=&quot;kuke-load__logo&quot; src=&quot;' + LOGO + '&quot; alt=&quot;&quot;&gt;' +<br /> '&lt;/div&gt;' +<br /> '&lt;p class=&quot;kuke-load__text&quot;&gt;正在加载' +<br /> '&lt;span class=&quot;kuke-load__dots&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;/span&gt;' +<br /> '&lt;/p&gt;' +<br /> '&lt;/div&gt;';<br /> <br /> document.body.appendChild( bar );<br /> document.body.appendChild( veil );<br /> }<br /> <br /> function setProgress( v ) {<br /> progress = v;<br /> bar.style.width = v + '%';<br /> }<br /> <br /> function creep() {<br /> // 无法预知真实进度，用递减步长向 92% 逼近，永不自行走满。<br /> creepTimer = setTimeout( function () {<br /> if ( !running ) {<br /> return;<br /> }<br /> setProgress( progress + ( 92 - progress ) * 0.12 );<br /> creep();<br /> }, 260 );<br /> }<br /> <br /> function start() {<br /> if ( running ) {<br /> return;<br /> }<br /> running = true;<br /> build();<br /> <br /> barTimer = setTimeout( function () {<br /> setProgress( 0 );<br /> bar.classList.add( 'is-on' );<br /> // 让 width:0 先落一帧，否则过渡不会触发。<br /> requestAnimationFrame( function () {<br /> setProgress( 28 );<br /> creep();<br /> } );<br /> }, BAR_DELAY );<br /> <br /> veilTimer = setTimeout( function () {<br /> veil.classList.add( 'is-on' );<br /> }, VEIL_DELAY );<br /> <br /> giveUpTimer = setTimeout( stop, GIVE_UP );<br /> }<br /> <br /> function stop() {<br /> running = false;<br /> clearTimeout( barTimer );<br /> clearTimeout( veilTimer );<br /> clearTimeout( creepTimer );<br /> clearTimeout( giveUpTimer );<br /> <br /> if ( !bar ) {<br /> return;<br /> }<br /> <br /> veil.classList.remove( 'is-on' );<br /> <br /> if ( bar.classList.contains( 'is-on' ) ) {<br /> setProgress( 100 );<br /> setTimeout( function () {<br /> if ( running ) {<br /> return;<br /> }<br /> bar.classList.remove( 'is-on' );<br /> setTimeout( function () {<br /> if ( !running ) {<br /> setProgress( 0 );<br /> }<br /> }, 220 );<br /> }, 180 );<br /> } else {<br /> setProgress( 0 );<br /> }<br /> }<br /> <br /> // 判断一次跳转是否值得加动画：必须是本站、会真正换页的整页导航。<br /> function shouldAnimate( url ) {<br /> if ( !url || url.origin !== location.origin ) {<br /> return false;<br /> }<br /> // 目标就是当前页 —— 页内锚点（含 href=&quot;#&quot;、跳到内容、回到顶部），不换页。<br /> if (<br /> url.pathname === location.pathname &amp;&amp;<br /> url.search === location.search<br /> ) {<br /> return false;<br /> }<br /> return true;<br /> }<br /> <br /> function onClick( e ) {<br /> if (<br /> e.defaultPrevented ||<br /> e.button !== 0 ||<br /> e.metaKey || e.ctrlKey || e.shiftKey || e.altKey<br /> ) {<br /> return;<br /> }<br /> <br /> var a = e.target.closest ? e.target.closest( 'a[href]' ) : null;<br /> if ( !a || a.hasAttribute( 'download' ) ) {<br /> return;<br /> }<br /> if ( a.target &amp;&amp; a.target !== '' &amp;&amp; a.target !== '_self' ) {<br /> return;<br /> }<br /> // 站内导航才有意义；协议不是 http(s) 的（mailto: / javascript: 等）跳过。<br /> if ( a.protocol !== 'http:' &amp;&amp; a.protocol !== 'https:' ) {<br /> return;<br /> }<br /> // 由脚本接管的交互控件（弹窗、抽屉、折叠等）不是跳转。<br /> if ( a.getAttribute( 'role' ) === 'button' || a.closest( '.kuke-auth' ) ) {<br /> return;<br /> }<br /> <br /> var url;<br /> try {<br /> url = new URL( a.href );<br /> } catch ( err ) {<br /> return;<br /> }<br /> <br /> if ( shouldAnimate( url ) ) {<br /> start();<br /> }<br /> }<br /> <br /> function onSubmit( e ) {<br /> if ( e.defaultPrevented ) {<br /> return;<br /> }<br /> <br /> var form = e.target;<br /> if ( !form || form.target === '_blank' || form.closest( '.kuke-auth' ) ) {<br /> return;<br /> }<br /> <br /> var url;<br /> try {<br /> url = new URL( form.action || location.href, location.href );<br /> } catch ( err ) {<br /> return;<br /> }<br /> <br /> if ( url.origin === location.origin ) {<br /> start();<br /> }<br /> }<br /> <br /> function init() {<br /> // 注册在 bubble 阶段、且晚于本文件其它监听器，<br /> // 于是弹窗等调用过 preventDefault() 的交互能被 defaultPrevented 过滤掉。<br /> document.addEventListener( 'click', onClick );<br /> document.addEventListener( 'submit', onSubmit );<br /> <br /> // 返回上一页（含 bfcache 复原）时必须收掉，否则旧遮罩会留在画面上。<br /> window.addEventListener( 'pageshow', stop );<br /> // 跳转被用户按 Esc 取消时也收掉。<br /> document.addEventListener( 'keydown', function ( e ) {<br /> if ( e.key === 'Escape' &amp;&amp; running ) {<br /> stop();<br /> }<br /> } );<br /> }<br /> <br /> if ( document.readyState === 'loading' ) {<br /> document.addEventListener( 'DOMContentLoaded', init );<br /> } else {<br /> init();<br /> }<br /> }() );</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=227 2026-08-20T11:56:03Z

<p>Kuke：​加入站内跳转加载动画（进度条 + 磨砂遮罩）</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> /* 主导航 active 态：由 body class 驱动（服务端直出，无 JS 依赖） */<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;],<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;],<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;],<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;],<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;],<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;],<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:visited,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:visited,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:visited,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:visited,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:visited,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]::after,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]::after,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]::after,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]::after,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]::after,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:hover,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:hover,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:hover,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:hover,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:hover,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:hover,<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:focus,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:focus,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:focus,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:focus,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:focus,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav__link::after,<br /> .citizen-header-position-right .kuke-nav__link::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }<br /> /* ==========================================================================<br /> 24. 站内跳转加载动画<br /> 分两级出现，避免「秒进」的页面被闪一下：<br /> ≥ 110ms 顶部细进度条（轻量提示，几乎无感）<br /> ≥ 320ms 全屏磨砂遮罩 + Logo 环形动画（真正在等的时候才出现）<br /> 动画挂在「正在离开的那一页」上：浏览器会保留旧页面的画面，直到新页面<br /> 绘制第一帧，所以这层遮罩正好盖住整段白屏等待，新页面一出现即自然消失。<br /> -------------------------------------------------------------------------- */<br /> <br /> :root {<br /> --kuke-load-bg: rgb( 248 250 252 / 0.84 );<br /> --kuke-load-fg: #475569;<br /> --kuke-load-track: rgb( 15 23 42 / 0.07 );<br /> --kuke-load-halo: rgb( 14 165 233 / 0.16 );<br /> }<br /> <br /> /* ---- 顶部进度条 ---- */<br /> <br /> .kuke-load-bar {<br /> position: fixed;<br /> inset-block-start: 0;<br /> inset-inline-start: 0;<br /> z-index: 2001;<br /> width: 0;<br /> height: 3px;<br /> border-end-end-radius: 3px;<br /> background: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand-strong, #0284c7 ),<br /> var( --kuke-brand, #0ea5e9 ) 55%,<br /> var( --kuke-brand-light, #7dd3fc )<br /> );<br /> box-shadow: 0 0 10px rgb( 14 165 233 / 0.55 );<br /> opacity: 0;<br /> pointer-events: none;<br /> transition:<br /> width 0.24s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> opacity 0.2s linear;<br /> }<br /> <br /> .kuke-load-bar.is-on {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 全屏遮罩 ---- */<br /> <br /> .kuke-load {<br /> position: fixed;<br /> inset: 0;<br /> z-index: 2000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> background: var( --kuke-load-bg );<br /> backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> -webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );<br /> opacity: 0;<br /> visibility: hidden;<br /> pointer-events: none;<br /> transition:<br /> opacity 0.24s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ),<br /> visibility 0s linear 0.24s;<br /> }<br /> <br /> .kuke-load.is-on {<br /> opacity: 1;<br /> visibility: visible;<br /> pointer-events: auto;<br /> transition-delay: 0s;<br /> }<br /> <br /> .kuke-load__panel {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 1.25rem;<br /> opacity: 0;<br /> transform: translateY( 10px ) scale( 0.96 );<br /> transition:<br /> opacity 0.32s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ) 0.04s,<br /> transform 0.32s var( --kuke-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ) 0.04s;<br /> }<br /> <br /> .kuke-load.is-on .kuke-load__panel {<br /> opacity: 1;<br /> transform: none;<br /> }<br /> <br /> /* ---- Logo + 环形指示器 ---- */<br /> <br /> .kuke-load__mark {<br /> position: relative;<br /> display: grid;<br /> place-items: center;<br /> width: 92px;<br /> height: 92px;<br /> }<br /> <br /> /* 静态底环 */<br /> .kuke-load__mark::before {<br /> content: '';<br /> position: absolute;<br /> inset: 0;<br /> border: 3px solid var( --kuke-load-track );<br /> border-radius: 50%;<br /> }<br /> <br /> /* 背后的柔光，给遮罩一点层次 */<br /> .kuke-load__mark::after {<br /> content: '';<br /> position: absolute;<br /> inset: -18px;<br /> border-radius: 50%;<br /> background: radial-gradient( circle, var( --kuke-load-halo ), transparent 68% );<br /> animation: kuke-load-halo 2.4s ease-in-out infinite;<br /> pointer-events: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> position: absolute;<br /> inset: 0;<br /> border-radius: 50%;<br /> background: conic-gradient(<br /> from 0deg,<br /> transparent 0deg,<br /> var( --kuke-brand-light, #7dd3fc ) 130deg,<br /> var( --kuke-brand, #0ea5e9 ) 250deg,<br /> var( --kuke-brand-strong, #0284c7 ) 330deg,<br /> transparent 360deg<br /> );<br /> -webkit-mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> mask: radial-gradient(<br /> farthest-side,<br /> transparent calc( 100% - 3px ),<br /> #000 calc( 100% - 2.5px )<br /> );<br /> animation: kuke-load-spin 0.85s linear infinite;<br /> }<br /> <br /> .kuke-load__logo {<br /> position: relative;<br /> width: 54px;<br /> height: 54px;<br /> border-radius: 15px;<br /> box-shadow: var( --kuke-shadow-brand, 0 6px 16px rgb( 2 132 199 / 0.28 ) );<br /> animation: kuke-load-breathe 1.8s ease-in-out infinite;<br /> }<br /> <br /> /* ---- 文案 ---- */<br /> <br /> .kuke-load__text {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.15em;<br /> margin: 0;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> letter-spacing: 0.03em;<br /> color: var( --kuke-load-fg );<br /> }<br /> <br /> .kuke-load__dots {<br /> display: inline-flex;<br /> gap: 3px;<br /> }<br /> <br /> .kuke-load__dots i {<br /> width: 3px;<br /> height: 3px;<br /> border-radius: 50%;<br /> background: currentcolor;<br /> opacity: 0.25;<br /> animation: kuke-load-dot 1.2s ease-in-out infinite;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 2 ) {<br /> animation-delay: 0.16s;<br /> }<br /> <br /> .kuke-load__dots i:nth-child( 3 ) {<br /> animation-delay: 0.32s;<br /> }<br /> <br /> /* ---- 关键帧 ---- */<br /> <br /> @keyframes kuke-load-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-breathe {<br /> 0%,<br /> 100% {<br /> transform: scale( 1 );<br /> }<br /> <br /> 50% {<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-halo {<br /> 0%,<br /> 100% {<br /> opacity: 0.55;<br /> transform: scale( 0.92 );<br /> }<br /> <br /> 50% {<br /> opacity: 1;<br /> transform: scale( 1.06 );<br /> }<br /> }<br /> <br /> @keyframes kuke-load-dot {<br /> 0%,<br /> 60%,<br /> 100% {<br /> opacity: 0.25;<br /> transform: translateY( 0 );<br /> }<br /> <br /> 30% {<br /> opacity: 1;<br /> transform: translateY( -3px );<br /> }<br /> }<br /> <br /> /* ---- 暗色 ---- */<br /> <br /> html.skin-theme-clientpref-night,<br /> html.skin-theme-clientpref-black {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os {<br /> --kuke-load-bg: rgb( 2 6 23 / 0.82 );<br /> --kuke-load-fg: #94a3b8;<br /> --kuke-load-track: rgb( 255 255 255 / 0.09 );<br /> --kuke-load-halo: rgb( 56 189 248 / 0.2 );<br /> }<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1 {<br /> --kuke-load-bg: rgb( 0 0 0 / 0.86 );<br /> }<br /> <br /> /* ---- 降低动态效果 ---- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-load__ring,<br /> .kuke-load__logo,<br /> .kuke-load__mark::after,<br /> .kuke-load__dots i {<br /> animation: none;<br /> }<br /> <br /> .kuke-load__ring {<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-load__panel {<br /> transition: none;<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=226 2026-08-20T11:24:09Z

<p>Kuke：​主导航 active 态改为 body class 驱动的纯 CSS，去掉 JS 依赖</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> /* 主导航 active 态：由 body class 驱动（服务端直出，无 JS 依赖） */<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;],<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;],<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;],<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;],<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;],<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;],<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;],<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;],<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:visited,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:visited,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:visited,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:visited,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:visited,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:visited,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:visited,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]::after,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]::after,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]::after,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]::after,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]::after,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]::after,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]::after,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:hover,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:hover,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:hover,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:hover,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:hover,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:hover,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:hover,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:hover,<br /> body.page-首页 .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.page-Main_Page .kuke-nav__link[data-nav=&quot;home&quot;]:focus,<br /> body.rootpage-子服一览 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-趣味生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-粘液空岛 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-纯净生存 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-机械动力 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-职业战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-起床战争 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-僵尸末日 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-避暑山庄 .kuke-nav__link[data-nav=&quot;servers&quot;]:focus,<br /> body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav=&quot;rules&quot;]:focus,<br /> body.rootpage-服务器常见问题 .kuke-nav__link[data-nav=&quot;faq&quot;]:focus,<br /> body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav=&quot;history&quot;]:focus,<br /> body.mw-special-Allpages .kuke-nav__link[data-nav=&quot;allpages&quot;]:focus,<br /> body.mw-special-Categories .kuke-nav__link[data-nav=&quot;cats&quot;]:focus,<br /> body.mw-special-Recentchanges .kuke-nav__link[data-nav=&quot;rc&quot;]:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav__link::after,<br /> .citizen-header-position-right .kuke-nav__link::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Common.js&diff=225 2026-08-20T11:22:43Z

<p>Kuke：​顶部导航改为皮肤模板服务端直出，移除 JS 注入以消除文字延迟</p> <hr /> <div>/* 横版登录 / 注册弹窗。<br /> 表单在本地直接渲染（不再抓取 Special 页面的 HTML），提交走 Action API<br /> clientlogin / createaccount，token 在页面加载时就后台预取，<br /> 因此弹窗打开即可用，没有等待。<br /> 独立页面 Special:UserLogin / Special:CreateAccount 保留，无 JS 时仍可用。 */<br /> ( function () {<br /> 'use strict';<br /> <br /> var LOGO = 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png';<br /> <br /> var MODES = {<br /> login: {<br /> page: 'Special:UserLogin',<br /> tab: '登录',<br /> title: '登录到 Kuke Wiki',<br /> sub: '登录后即可编辑条目、参与讨论并同步个人偏好设置。',<br /> submit: '登录',<br /> busy: '正在登录…'<br /> },<br /> signup: {<br /> page: 'Special:CreateAccount',<br /> tab: '注册',<br /> title: '创建账号',<br /> sub: '加入 KukeMC 官方百科的编辑与维护，只需一分钟。',<br /> submit: '创建账号',<br /> busy: '正在创建…'<br /> }<br /> };<br /> <br /> var FIELDS = {<br /> login: [<br /> { name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },<br /> { name: 'password', label: '密码', type: 'password', autocomplete: 'current-password', required: true },<br /> { name: 'rememberMe', label: '在此浏览器上保持登录', type: 'checkbox' }<br /> ],<br /> signup: [<br /> { name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },<br /> { name: 'password', label: '密码', type: 'password', autocomplete: 'new-password', required: true },<br /> { name: 'retype', label: '确认密码', type: 'password', autocomplete: 'new-password', required: true },<br /> { name: 'email', label: '电子邮件', type: 'email', autocomplete: 'email', hint: '选填，用于找回密码' },<br /> { name: 'captchaWord', label: '验证码', type: 'captcha', required: true }<br /> ]<br /> };<br /> <br /> var POINTS = [<br /> { icon: 'pencil', text: '编辑与创建条目，完善服务器资料' },<br /> { icon: 'chat', text: '参与讨论页，与其他编辑者协作' },<br /> { icon: 'star', text: '保存个人偏好、监视列表与编辑历史' },<br /> { icon: 'clock', text: '追踪最近更改，第一时间了解更新' }<br /> ];<br /> <br /> var ICONS = {<br /> pencil: 'M13.5 2.5a2.12 2.12 0 0 1 3 3L7 15l-4 1 1-4Z',<br /> chat: 'M3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v7a1.5 1.5 0 0 1-1.5 1.5H8l-4 3v-3h-.5A1.5 1.5 0 0 1 3 12.5Z',<br /> star: 'm10 2.6 2.3 4.66 5.15.75-3.72 3.63.88 5.12L10 14.34l-4.6 2.42.87-5.12L2.55 8l5.15-.75Z',<br /> clock: 'M10 2.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Zm0 3.6v4.2l3 1.8',<br /> close: 'M5 5l10 10M15 5L5 15',<br /> eye: 'M1.8 10S4.9 4.7 10 4.7 18.2 10 18.2 10 15.1 15.3 10 15.3 1.8 10 1.8 10Zm8.2 2.2a2.2 2.2 0 1 0 0-4.4 2.2 2.2 0 0 0 0 4.4Z',<br /> eyeOff: 'M3 3l14 14M8.2 8.3A2.2 2.2 0 0 0 10 12.2c.6 0 1.1-.2 1.6-.6M6.1 6.2C3.6 7.6 1.8 10 1.8 10s3.1 5.3 8.2 5.3c1.4 0 2.6-.4 3.7-1M15.5 13C17.3 11.8 18.2 10 18.2 10S15.1 4.7 10 4.7c-.7 0-1.4.1-2 .3',<br /> alert: 'M10 6.6v4.2m0 2.6h.01M8.6 3.2 2.2 14.4A1.6 1.6 0 0 0 3.6 16.8h12.8a1.6 1.6 0 0 0 1.4-2.4L11.4 3.2a1.6 1.6 0 0 0-2.8 0Z'<br /> };<br /> <br /> var root = null;<br /> var main = null;<br /> var body = null;<br /> var titleEl = null;<br /> var subEl = null;<br /> var alertEl = null;<br /> var lastFocus = null;<br /> var current = null;<br /> var api = null;<br /> var apiReady = null;<br /> var tokens = {};<br /> var captcha = null;<br /> var submitting = false;<br /> <br /> function svg( d, cls, size ) {<br /> var s = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );<br /> s.setAttribute( 'viewBox', '0 0 20 20' );<br /> s.setAttribute( 'width', size || '18' );<br /> s.setAttribute( 'height', size || '18' );<br /> s.setAttribute( 'aria-hidden', 'true' );<br /> s.setAttribute( 'fill', 'none' );<br /> s.setAttribute( 'stroke', 'currentColor' );<br /> s.setAttribute( 'stroke-width', '1.6' );<br /> s.setAttribute( 'stroke-linecap', 'round' );<br /> s.setAttribute( 'stroke-linejoin', 'round' );<br /> if ( cls ) {<br /> s.setAttribute( 'class', cls );<br /> }<br /> var p = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );<br /> p.setAttribute( 'd', d );<br /> s.appendChild( p );<br /> return s;<br /> }<br /> <br /> function el( tag, cls, text ) {<br /> var n = document.createElement( tag );<br /> if ( cls ) {<br /> n.className = cls;<br /> }<br /> if ( text ) {<br /> n.textContent = text;<br /> }<br /> return n;<br /> }<br /> <br /> function returnTarget() {<br /> var page = mw.config.get( 'wgPageName' );<br /> if ( /^Special:(UserLogin|CreateAccount|UserLogout)$/i.test( page ) ) {<br /> return mw.config.get( 'wgMainPageTitle' ) || '首页';<br /> }<br /> return page;<br /> }<br /> <br /> function returnUrl() {<br /> return location.origin + mw.util.getUrl( returnTarget() );<br /> }<br /> <br /> /* ---------- API ---------- */<br /> <br /> function ready() {<br /> if ( !apiReady ) {<br /> apiReady = mw.loader.using( [ 'mediawiki.api', 'mediawiki.util' ] ).then( function () {<br /> api = new mw.Api();<br /> return api;<br /> } );<br /> }<br /> return apiReady;<br /> }<br /> <br /> function token( type ) {<br /> if ( tokens[ type ] ) {<br /> return tokens[ type ];<br /> }<br /> tokens[ type ] = ready().then( function () {<br /> return api.get( {<br /> action: 'query',<br /> meta: 'tokens',<br /> type: type,<br /> formatversion: 2<br /> } );<br /> } ).then( function ( d ) {<br /> return d.query.tokens[ type + 'token' ];<br /> } );<br /> return tokens[ type ];<br /> }<br /> <br /> /* QuestyCaptcha 的题面与 id，每次进入注册态重新取（旧 id 会失效） */<br /> function loadCaptcha() {<br /> return ready().then( function () {<br /> return api.get( {<br /> action: 'query',<br /> meta: 'authmanagerinfo',<br /> amirequestsfor: 'create',<br /> formatversion: 2<br /> } );<br /> } ).then( function ( d ) {<br /> var reqs = ( d.query &amp;&amp; d.query.authmanagerinfo &amp;&amp; d.query.authmanagerinfo.requests ) || [];<br /> var hit = null;<br /> reqs.forEach( function ( r ) {<br /> if ( r.id &amp;&amp; r.id.indexOf( 'Captcha' ) !== -1 &amp;&amp; r.fields &amp;&amp; r.fields.captchaId ) {<br /> hit = r;<br /> }<br /> } );<br /> if ( !hit ) {<br /> return null;<br /> }<br /> return {<br /> id: hit.fields.captchaId.value,<br /> question: hit.fields.captchaInfo ? hit.fields.captchaInfo.value : '',<br /> label: ( hit.fields.captchaWord &amp;&amp; hit.fields.captchaWord.label ) || '验证码'<br /> };<br /> } ).catch( function () {<br /> return null;<br /> } );<br /> }<br /> <br /> /* ---------- 结构 ---------- */<br /> <br /> function build() {<br /> root = el( 'div', 'kuke-auth' );<br /> root.hidden = true;<br /> <br /> var backdrop = el( 'div', 'kuke-auth__backdrop' );<br /> backdrop.addEventListener( 'click', close );<br /> root.appendChild( backdrop );<br /> <br /> var dialog = el( 'div', 'kuke-auth__dialog' );<br /> dialog.setAttribute( 'role', 'dialog' );<br /> dialog.setAttribute( 'aria-modal', 'true' );<br /> dialog.setAttribute( 'aria-labelledby', 'kuke-auth-title' );<br /> <br /> var closeBtn = el( 'button', 'kuke-auth__close' );<br /> closeBtn.type = 'button';<br /> closeBtn.setAttribute( 'aria-label', '关闭' );<br /> closeBtn.appendChild( svg( ICONS.close ) );<br /> closeBtn.addEventListener( 'click', close );<br /> dialog.appendChild( closeBtn );<br /> <br /> // 左：品牌栏<br /> var aside = el( 'aside', 'kuke-auth__aside' );<br /> var logo = el( 'img', 'kuke-auth__logo' );<br /> logo.src = LOGO;<br /> logo.alt = '';<br /> logo.width = 44;<br /> logo.height = 44;<br /> aside.appendChild( logo );<br /> aside.appendChild( el( 'p', 'kuke-auth__brand', 'Kuke Wiki' ) );<br /> aside.appendChild( el( 'p', 'kuke-auth__tagline', 'KukeMC 群组服官方百科' ) );<br /> <br /> var ul = el( 'ul', 'kuke-auth__points' );<br /> POINTS.forEach( function ( item ) {<br /> var li = el( 'li', 'kuke-auth__point' );<br /> li.appendChild( svg( ICONS[ item.icon ], 'kuke-auth__point-icon' ) );<br /> li.appendChild( el( 'span', null, item.text ) );<br /> ul.appendChild( li );<br /> } );<br /> aside.appendChild( ul );<br /> aside.appendChild( el( 'p', 'kuke-auth__note', '本站内容由社区共同维护，欢迎参与。' ) );<br /> dialog.appendChild( aside );<br /> <br /> // 右：表单栏<br /> main = el( 'div', 'kuke-auth__main' );<br /> <br /> var head = el( 'div', 'kuke-auth__head' );<br /> var tabs = el( 'div', 'kuke-auth__tabs' );<br /> tabs.setAttribute( 'role', 'tablist' );<br /> Object.keys( MODES ).forEach( function ( key ) {<br /> var b = el( 'button', 'kuke-auth__tab', MODES[ key ].tab );<br /> b.type = 'button';<br /> b.dataset.mode = key;<br /> b.setAttribute( 'role', 'tab' );<br /> b.addEventListener( 'click', function () {<br /> render( key );<br /> } );<br /> tabs.appendChild( b );<br /> } );<br /> head.appendChild( tabs );<br /> <br /> titleEl = el( 'h2', 'kuke-auth__title' );<br /> titleEl.id = 'kuke-auth-title';<br /> head.appendChild( titleEl );<br /> subEl = el( 'p', 'kuke-auth__sub' );<br /> head.appendChild( subEl );<br /> main.appendChild( head );<br /> <br /> body = el( 'div', 'kuke-auth__body' );<br /> main.appendChild( body );<br /> dialog.appendChild( main );<br /> <br /> root.appendChild( dialog );<br /> document.body.appendChild( root );<br /> }<br /> <br /> /* ---------- 表单 ---------- */<br /> <br /> function passwordToggle( input ) {<br /> var btn = el( 'button', 'kuke-auth__peek' );<br /> btn.type = 'button';<br /> btn.setAttribute( 'aria-label', '显示密码' );<br /> btn.appendChild( svg( ICONS.eye, null, '17' ) );<br /> btn.addEventListener( 'click', function () {<br /> var show = input.type === 'password';<br /> input.type = show ? 'text' : 'password';<br /> btn.setAttribute( 'aria-label', show ? '隐藏密码' : '显示密码' );<br /> btn.textContent = '';<br /> btn.appendChild( svg( show ? ICONS.eyeOff : ICONS.eye, null, '17' ) );<br /> input.focus();<br /> } );<br /> return btn;<br /> }<br /> <br /> function field( spec, form ) {<br /> if ( spec.type === 'checkbox' ) {<br /> var wrap = el( 'label', 'kuke-auth__check' );<br /> var box = el( 'input' );<br /> box.type = 'checkbox';<br /> box.name = spec.name;<br /> wrap.appendChild( box );<br /> wrap.appendChild( el( 'span', null, spec.label ) );<br /> return wrap;<br /> }<br /> <br /> var id = 'kuke-auth-' + spec.name;<br /> var row = el( 'div', 'kuke-auth__field' );<br /> var label = el( 'label', 'kuke-auth__label', spec.label );<br /> label.htmlFor = id;<br /> if ( !spec.required ) {<br /> label.appendChild( el( 'span', 'kuke-auth__optional', '选填' ) );<br /> }<br /> row.appendChild( label );<br /> <br /> var control = el( 'div', 'kuke-auth__control' );<br /> var input = el( 'input', 'kuke-auth__input' );<br /> input.id = id;<br /> input.name = spec.name;<br /> input.type = spec.type === 'captcha' ? 'text' : spec.type;<br /> if ( spec.autocomplete ) {<br /> input.autocomplete = spec.autocomplete;<br /> }<br /> if ( spec.required ) {<br /> input.required = true;<br /> }<br /> if ( spec.type === 'captcha' ) {<br /> input.autocomplete = 'off';<br /> input.inputMode = 'text';<br /> row.classList.add( 'kuke-auth__field--captcha' );<br /> }<br /> control.appendChild( input );<br /> if ( spec.type === 'password' ) {<br /> control.classList.add( 'kuke-auth__control--peek' );<br /> control.appendChild( passwordToggle( input ) );<br /> }<br /> row.appendChild( control );<br /> <br /> if ( spec.type === 'captcha' ) {<br /> var q = el( 'p', 'kuke-auth__captcha' );<br /> q.appendChild( el( 'span', 'kuke-auth__captcha-q', '正在获取…' ) );<br /> row.appendChild( q );<br /> form.captchaQuestion = q.firstChild;<br /> loadCaptcha().then( function ( data ) {<br /> if ( !form.isConnected ) {<br /> return;<br /> }<br /> captcha = data;<br /> q.firstChild.textContent = data ? data.question : '（暂不可用，请稍后重试）';<br /> } );<br /> }<br /> if ( spec.hint ) {<br /> row.appendChild( el( 'p', 'kuke-auth__hint', spec.hint ) );<br /> }<br /> return row;<br /> }<br /> <br /> function showAlert( text ) {<br /> if ( !alertEl ) {<br /> return;<br /> }<br /> alertEl.textContent = '';<br /> if ( !text ) {<br /> alertEl.hidden = true;<br /> return;<br /> }<br /> alertEl.appendChild( svg( ICONS.alert, 'kuke-auth__alert-icon' ) );<br /> alertEl.appendChild( el( 'span', null, text ) );<br /> alertEl.hidden = false;<br /> }<br /> <br /> function setSubmitting( btn, mode, on ) {<br /> submitting = on;<br /> btn.disabled = on;<br /> btn.classList.toggle( 'kuke-auth__submit--busy', on );<br /> btn.textContent = '';<br /> if ( on ) {<br /> btn.appendChild( el( 'span', 'kuke-auth__spinner' ) );<br /> btn.appendChild( el( 'span', null, MODES[ mode ].busy ) );<br /> } else {<br /> btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );<br /> }<br /> }<br /> <br /> function values( form ) {<br /> var out = {};<br /> Array.prototype.forEach.call( form.querySelectorAll( 'input' ), function ( i ) {<br /> out[ i.name ] = i.type === 'checkbox' ? ( i.checked ? '1' : '' ) : i.value;<br /> } );<br /> return out;<br /> }<br /> <br /> function submit( mode, form, btn ) {<br /> if ( submitting ) {<br /> return;<br /> }<br /> var v = values( form );<br /> if ( mode === 'signup' &amp;&amp; v.password !== v.retype ) {<br /> showAlert( '两次输入的密码不一致。' );<br /> return;<br /> }<br /> showAlert( '' );<br /> setSubmitting( btn, mode, true );<br /> <br /> var type = mode === 'login' ? 'login' : 'createaccount';<br /> ready().then( function () {<br /> return token( type );<br /> } ).then( function ( tk ) {<br /> var params;<br /> if ( mode === 'login' ) {<br /> params = {<br /> action: 'clientlogin',<br /> loginreturnurl: returnUrl(),<br /> logintoken: tk,<br /> username: v.username,<br /> password: v.password,<br /> formatversion: 2,<br /> errorformat: 'html',<br /> errorlang: 'zh'<br /> };<br /> if ( v.rememberMe ) {<br /> params.rememberMe = '1';<br /> }<br /> } else {<br /> params = {<br /> action: 'createaccount',<br /> createreturnurl: returnUrl(),<br /> createtoken: tk,<br /> username: v.username,<br /> password: v.password,<br /> retype: v.retype,<br /> formatversion: 2,<br /> errorformat: 'html',<br /> errorlang: 'zh'<br /> };<br /> if ( v.email ) {<br /> params.email = v.email;<br /> }<br /> if ( captcha ) {<br /> params.captchaId = captcha.id;<br /> params.captchaWord = v.captchaWord;<br /> }<br /> }<br /> return api.post( params );<br /> } ).then( function ( d ) {<br /> var res = d.clientlogin || d.createaccount || {};<br /> if ( res.status === 'PASS' ) {<br /> location.href = returnUrl();<br /> return;<br /> }<br /> // 需要额外步骤（如二次验证）时交给完整页面处理<br /> if ( res.status === 'UI' || res.status === 'REDIRECT' ) {<br /> location.href = mw.util.getUrl( MODES[ mode ].page, { returnto: returnTarget() } );<br /> return;<br /> }<br /> setSubmitting( btn, mode, false );<br /> showAlert( res.message || '提交失败，请稍后重试。' );<br /> // token 与验证码一次性，失败后重取<br /> delete tokens[ type ];<br /> if ( mode === 'signup' ) {<br /> refreshCaptcha( form );<br /> }<br /> } ).catch( function ( code, data ) {<br /> setSubmitting( btn, mode, false );<br /> var msg = ( data &amp;&amp; data.error &amp;&amp; data.error.info ) || '网络异常，请稍后重试。';<br /> showAlert( msg );<br /> delete tokens[ type ];<br /> } );<br /> }<br /> <br /> function refreshCaptcha( form ) {<br /> var q = form.captchaQuestion;<br /> if ( !q ) {<br /> return;<br /> }<br /> q.textContent = '正在获取…';<br /> loadCaptcha().then( function ( data ) {<br /> captcha = data;<br /> if ( q.isConnected ) {<br /> q.textContent = data ? data.question : '（暂不可用，请稍后重试）';<br /> }<br /> } );<br /> }<br /> <br /> function render( mode ) {<br /> if ( current === mode ) {<br /> return;<br /> }<br /> current = mode;<br /> captcha = null;<br /> <br /> titleEl.textContent = MODES[ mode ].title;<br /> subEl.textContent = MODES[ mode ].sub;<br /> Array.prototype.forEach.call( root.querySelectorAll( '.kuke-auth__tab' ), function ( b ) {<br /> var on = b.dataset.mode === mode;<br /> b.classList.toggle( 'kuke-auth__tab--active', on );<br /> b.setAttribute( 'aria-selected', on ? 'true' : 'false' );<br /> } );<br /> <br /> body.textContent = '';<br /> <br /> alertEl = el( 'div', 'kuke-auth__alert' );<br /> alertEl.setAttribute( 'role', 'alert' );<br /> alertEl.hidden = true;<br /> body.appendChild( alertEl );<br /> <br /> var form = el( 'form', 'kuke-auth__form' );<br /> form.setAttribute( 'novalidate', 'novalidate' );<br /> FIELDS[ mode ].forEach( function ( spec ) {<br /> form.appendChild( field( spec, form ) );<br /> } );<br /> <br /> var btn = el( 'button', 'kuke-auth__submit' );<br /> btn.type = 'submit';<br /> btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );<br /> form.appendChild( btn );<br /> <br /> form.addEventListener( 'submit', function ( e ) {<br /> e.preventDefault();<br /> submit( mode, form, btn );<br /> } );<br /> body.appendChild( form );<br /> <br /> var foot = el( 'p', 'kuke-auth__foot' );<br /> if ( mode === 'login' ) {<br /> var reset = el( 'a', null, '忘记密码？' );<br /> reset.href = mw.util.getUrl( 'Special:PasswordReset' );<br /> foot.appendChild( reset );<br /> foot.appendChild( el( 'span', 'kuke-auth__dot', '·' ) );<br /> var toSignup = el( 'a', null, '还没有账号？立即注册' );<br /> toSignup.href = '#';<br /> toSignup.addEventListener( 'click', function ( e ) {<br /> e.preventDefault();<br /> render( 'signup' );<br /> } );<br /> foot.appendChild( toSignup );<br /> } else {<br /> foot.appendChild( el( 'span', null, '已有账号？' ) );<br /> var toLogin = el( 'a', null, '直接登录' );<br /> toLogin.href = '#';<br /> toLogin.addEventListener( 'click', function ( e ) {<br /> e.preventDefault();<br /> render( 'login' );<br /> } );<br /> foot.appendChild( toLogin );<br /> }<br /> body.appendChild( foot );<br /> <br /> main.scrollTop = 0;<br /> // 预热对应的 token<br /> token( mode === 'login' ? 'login' : 'createaccount' );<br /> <br /> var first = form.querySelector( 'input' );<br /> if ( first ) {<br /> first.focus();<br /> }<br /> }<br /> <br /> /* ---------- 开关 ---------- */<br /> <br /> function onKey( e ) {<br /> if ( e.key === 'Escape' ) {<br /> close();<br /> return;<br /> }<br /> if ( e.key !== 'Tab' || root.hidden ) {<br /> return;<br /> }<br /> var items = root.querySelectorAll(<br /> 'a[href], button:not([disabled]), input:not([type=hidden]), select, textarea'<br /> );<br /> if ( !items.length ) {<br /> return;<br /> }<br /> var first = items[ 0 ];<br /> var last = items[ items.length - 1 ];<br /> if ( e.shiftKey &amp;&amp; document.activeElement === first ) {<br /> e.preventDefault();<br /> last.focus();<br /> } else if ( !e.shiftKey &amp;&amp; document.activeElement === last ) {<br /> e.preventDefault();<br /> first.focus();<br /> }<br /> }<br /> <br /> function open( mode ) {<br /> if ( !root ) {<br /> build();<br /> }<br /> lastFocus = document.activeElement;<br /> root.hidden = false;<br /> document.body.classList.add( 'kuke-auth-open' );<br /> document.addEventListener( 'keydown', onKey );<br /> render( mode );<br /> }<br /> <br /> function close() {<br /> if ( !root || root.hidden ) {<br /> return;<br /> }<br /> root.hidden = true;<br /> current = null;<br /> document.body.classList.remove( 'kuke-auth-open' );<br /> document.removeEventListener( 'keydown', onKey );<br /> if ( lastFocus &amp;&amp; lastFocus.focus ) {<br /> lastFocus.focus();<br /> }<br /> }<br /> <br /> function modeOf( href ) {<br /> var target;<br /> try {<br /> target = new URL( href, location.href );<br /> } catch ( e ) {<br /> return null;<br /> }<br /> if ( target.origin !== location.origin ) {<br /> return null;<br /> }<br /> var path = decodeURIComponent( target.pathname + '?' + target.search );<br /> if ( /Special:UserLogin|特殊:用户登录|Special:登录/i.test( path ) ) {<br /> return 'login';<br /> }<br /> if ( /Special:CreateAccount|特殊:创建账户|Special:创建账号/i.test( path ) ) {<br /> return 'signup';<br /> }<br /> return null;<br /> }<br /> <br /> function onClick( e ) {<br /> if ( e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) {<br /> return;<br /> }<br /> var a = e.target.closest ? e.target.closest( 'a[href]' ) : null;<br /> if ( !a || a.target === '_blank' ) {<br /> return;<br /> }<br /> var mode = modeOf( a.getAttribute( 'href' ) );<br /> if ( !mode ) {<br /> return;<br /> }<br /> e.preventDefault();<br /> open( mode );<br /> }<br /> <br /> function init() {<br /> if ( mw.config.get( 'wgUserName' ) ) {<br /> return;<br /> }<br /> document.addEventListener( 'click', onClick );<br /> // 后台预取登录 token，弹窗打开时表单已可直接提交<br /> token( 'login' );<br /> var direct = /[?&amp;]kukeauth=(login|signup)/.exec( location.search );<br /> if ( direct ) {<br /> open( direct[ 1 ] );<br /> }<br /> }<br /> <br /> if ( document.readyState === 'loading' ) {<br /> document.addEventListener( 'DOMContentLoaded', init );<br /> } else {<br /> init();<br /> }<br /> }() );</div>

Kuke https://wiki.kuke.ink/index.php?title=%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95&diff=224 2026-08-20T11:04:53Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>&lt;div class=&quot;kw-notice&quot;&gt;<br /> '''因该插件的问题，它无法保护你领地中粘液科技的容器，请务必跳转至本文中【如何保护领地中的粘液容器】部分！'''<br /> &lt;/div&gt;<br /> <br /> == 领地功能介绍 ==<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%BA%AF%E5%87%80%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95/01.png&lt;span class=&quot;kw-figcaption&quot;&gt;2025-06-26_12.03.47_4K.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> 这是位于生存世界中，一位玩家建设的生存小屋，样貌平平无奇，但在这荒郊野外，无疑是一个温馨的栖身之所。而这所小屋位于出生点不远处，经常有不少人来访，而其中必然有不怀好意之人。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%BA%AF%E5%87%80%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95/02.png&lt;span class=&quot;kw-figcaption&quot;&gt;2025-06-26_12.20.11_4K.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> 随着 tnt 的一声巨响，一个玩家耗费了数小时搭建起的小屋伴随他积攒了多日的物资灰飞烟灭（实际上生存世界是有开防爆和防火焰蔓延的，图中只是编者手动拆成这样的，当然这小屋本来就是现场造的）。<br /> <br /> 那么要如何避免自己的建筑被不速之客破坏、如何保障自己箱子中财产的安全呢？此时你就需要运用领地插件来有效管理你的地块，而它的作用，也绝非只有保护。<br /> <br /> === 如何创建&amp;管理领地 ===<br /> <br /> 打开菜单，找到左下角的木锄头样式的领地按钮，点击后会在聊天栏中弹出该插件的相关配置内容，后续的操作只需要点击 [按钮] 即可。（见图一）<br /> <br /> 而下文关于领地管理的部分，也将会在聊天栏中进行全部的操作（见图二）。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%BA%AF%E5%87%80%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95/03.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%BA%AF%E5%87%80%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95/04.png&lt;/div&gt;<br /> <br /> 虽然说主菜单中，有一个创建领地按钮，但是编者更加推荐你先进行地块的圈画，然后再进行领地的创建，这样子可以更好的控制领地的大小，也可以更好的节省你的金币。<br /> <br /> 我们的手上需要拿着原版的木锄头，来到所需要圈画领地的地块上，左右键分别选取领地的两个对角顶点（就是整个领地看成矩形，对角的俩点），圈画完毕后，插件会有粒子特效展示领地的圈画范围，如图下所示（如果什么粒子都没看到，记得视频设置里开启全部粒子效果展示）<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%BA%AF%E5%87%80%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95/05.png&lt;span class=&quot;kw-figcaption&quot;&gt;2025-06-26_12.06.20_4K.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> 在框选完范围后，我们在聊天栏输入 /dom create &amp;lt;领地名称&gt; 便可成功创建自己的领地，之后为了方便可以直接使用 /dom list 进入自己的领地列表。<br /> <br /> 在领地列表中，找到你所需要管理的领地，点击绿色的 [管理领地] 按钮，然后你就进入到了该领地的管理界面。<br /> <br /> 关于领地管理部分无需过多的介绍，所有的按钮插件内都有相关的解释。如果实在搞不清楚，可以前往 [https://dominion.lunadeer.cn/notes/doc/player/ 插件官方文档页面] ，里头有更多关于该插件的介绍<br /> <br /> === 如何创建&amp;管理子领地 ===<br /> <br /> 站在你的领地范围中，使用木锄头像创建领地一样框选出子领地的范围（别超出领地的范围），框选完成后在聊天栏输入 /dominion create_sub &amp;lt;子领地名称&gt; &amp;lt;父领地名称&gt; 即可创建成功。<br /> <br /> 子领地的管理方式与领地相同，使用 /dom list 进入自己的领地列表后，找到你刚刚创建的子领地，即可进入该子领地的控制面板。<br /> <br /> 理论上你可以在子领地中在创建子领地，具体如何规划，取决于在座的各位万家了！<br /> <br /> === 如何保护领地中的粘液容器 ===<br /> <br /> 由于该插件的问题，它无法保护你领地中粘液科技的容器，也就是即使你在领地权限中设置了容器保护，但是访客依然可以打开你的粘液容器。<br /> <br /> 此时有两种解决办法：在整个领地的权限中，禁止访客的移动权限；将所有粘液容器搬迁至领地中的某处，创建子领地，禁止访客的移动权限。<br /> <br /> 这两个方法的大前提是都需要保证访客在外头摸不到里头的粘液容器，否则没有防护效果！<br /> <br /> === 注意事项 ===<br /> <br /> * '''千万别在资源世界中创建领地并造家！资源世界每周都会重置！！'''<br /> * '''千万记得检查自己没有关闭访客移动权限的领地中的粘液容器！！'''<br /> * 如果在你领地选址周围已经有其他领地，建议距离远一点，以免后续扩建时与其他领地产生冲突。<br /> * 请多运用领地管理中的权限组功能，不要将权限过多的给予某位成员！<br /> <br /> [[Category:游玩指南]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E9%85%BF%E9%85%92%E7%B3%BB%E7%BB%9F&diff=223 2026-08-20T11:04:52Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>''温两碗酒，要一碟茴香豆。''<br /> <br /> == 发酵 ==<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E9%85%BF%E9%85%92%E7%B3%BB%E7%BB%9F/01.png&lt;/div&gt;<br /> <br /> 第一步包括发酵新鲜的食材。<br /> <br /> # 将大锅放在火源或其他热源上<br /> # 装满水<br /> # 右键单击添加原料<br /> # 等待原料发酵几分钟<br /> # 用玻璃瓶装起来<br /> <br /> ''小提示：如果你想知道配料发酵的时间，可以使用时钟右键大锅查看。''<br /> <br /> == 蒸馏 ==<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E9%85%BF%E9%85%92%E7%B3%BB%E7%BB%9F/02.png&lt;/div&gt;<br /> <br /> 有一些酒在制作时不需要蒸馏这个步骤。<br /> <br /> # 将带有发酵物的玻璃瓶放入酿造台中<br /> # 将萤石粉作为催化剂放到最上面（蒸馏时不会消耗催化剂）<br /> <br /> == 陈酿 ==<br /> <br /> 陈酿化酒需要一个桶，可以很小，也可以很大！<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E9%85%BF%E9%85%92%E7%B3%BB%E7%BB%9F/03.png&lt;/div&gt;<br /> <br /> === 迷你桶 ===<br /> <br /> ''小提示：迷你桶可以用于一些啤酒的陈酿， 只需制作和放置酒桶，然后将啤酒装好放进去即可。''<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E9%85%BF%E9%85%92%E7%B3%BB%E7%BB%9F/04.png&lt;/div&gt;<br /> <br /> === 小桶 ===<br /> <br /> 使用 8 个木制楼梯来构建桶形形状。<br /> <br /> 在右下角放置一个标牌，并在上面的行中写上 “酒桶”<br /> <br /> ''小提示：创造成功会提示“木桶已创造”。''<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E9%85%BF%E9%85%92%E7%B3%BB%E7%BB%9F/05.png&lt;/div&gt;<br /> <br /> === 大桶 ===<br /> <br /> 使用 5 个栅栏，16 个木制楼梯和 18 个木板来构建桶形形状，别忘了在桶前面装好水龙头（栅栏）和一个写有“酒桶”的告示牌。<br /> <br /> ''小提示：创造成功会提示“木桶已创造”。''<br /> <br /> * 右击打开桶，将酒放入桶中静置。<br /> * 把饮品放进桶里就能贮存。<br /> * 每经过一个 MC 日，饮品就会贮存一年。<br /> * 根据配方的不同，用于建造桶的木材类型可能会改变陈酿的质量。<br /> * 原版桶始终判定为橡木桶。<br /> <br /> 桶不应该在静置时被破坏，因为这会泄漏里面的美酒 :(<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> 干杯！！！🍻 经过了重重工序，你终于能喝上美酒啦。酒内的酒精会在饮用时被激发，根据它的含量，这将有不同的效果。畅饮后希望你还能找到回家的路。<br /> &lt;/div&gt;<br /> <br /> == 密封 ==<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E9%85%BF%E9%85%92%E7%B3%BB%E7%BB%9F/06.png&lt;/div&gt;<br /> <br /> 你可以把你酿造的饮品提供给其他玩家，他们可以放进桶里继续贮存。但玩家商店要求出售的物品必须完全相同，由此需要用打包密封的方式来解决。想象一下，就和用封条把酒封起来一样。<br /> <br /> * 要出售饮品，你需要在密封桌上进行密封<br /> * 密封桌需要 2 个瓶子和 4 个木板<br /> * 把饮品放入，就能使它们的属性均等<br /> * 密封的饮品不能继续贮存或进一步加工，也不能显示详细信息<br /> <br /> == 附录：配方 ==<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> 为了方便各位酒鬼，我们从官方摘录了配方，请享用。<br /> &lt;/div&gt;<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! 配方 !! 原料 !! 发酵时间 !! 蒸馏 !! 陈置/木种<br /> |-<br /> | 啤酒 || 6 小麦 || 8 分钟 || × || 3 年/任何<br /> |-<br /> | 麦酒 || 3 小麦 || 8 分钟 || × || 2 年/白桦<br /> |-<br /> | 黑啤 || 6 小麦 || 8 分钟 || × || 啤酒的三倍/黑橡木<br /> |-<br /> | 红酒 || 5 甜浆果 || 5 分钟 || × || 很久/任何<br /> |-<br /> | 蜂蜜酒 || 6 甘蔗 || 3 分钟 || × || 4 年/橡木<br /> |-<br /> | 苹果蜂蜜酒 || 6 甘蔗、1 苹果 || 和蜜酒相似 || × || 4 年/橡木<br /> |-<br /> | 苹果酒 || 一些苹果 || 7/8 分钟 || × || 3 年/任何<br /> |-<br /> | 苹果蒸馏酒 || 一些苹果 || 久 || √ || 6 年/金合欢<br /> |-<br /> | 威士忌 || 一些小麦 || 一个小麦一分钟 || √ || 很久/比金合欢稍暗<br /> |-<br /> | 朗姆酒 || 一些甘蔗 || 短 || √ || 久/橡木<br /> |-<br /> | 伏特加 || 10 土豆 || 久 || √ || 无需<br /> |-<br /> | 蘑菇伏特加 || 土豆和蘑菇 || 很久 || √ || 无需<br /> |-<br /> | 杜松子酒 || 9 小麦、一些蓝花 || 短 || √ || 无需<br /> |-<br /> | 龙舌兰 || 一些仙人掌 || 久 || √ || 久/桦木<br /> |-<br /> | 苦艾酒 || 一些草 || 久 || √ || 无需<br /> |-<br /> | 绿苦艾酒 || 一些草和另一种绿的东西 || 如常 || √ || 无需<br /> |-<br /> | 土豆汤 || 5 土豆、一些草 || 短 || × || 无需<br /> |-<br /> | 咖啡 || 一些可可豆、2 桶牛奶 || 短 || × || 无需<br /> |-<br /> | 蛋奶酒 || 5 鸡蛋、一点糖、1 桶牛奶 || 短 || × || 短/任何<br /> |-<br /> | 昏睡红茶 || 2 茶叶、一点棕\红染料、糖 || 4 分钟 || × || 任何<br /> |-<br /> | 樱花清酒 || 一些小麦种子、 2 樱花树叶、一些糖 || 4 分钟 || x || 任何<br /> |-<br /> | 二锅头 || 稍多小麦、4 糖、一些玉米 || 10 分钟 || √ || 任何<br /> |-<br /> | 醒酒汤 || 4 甘蔗、2 桶牛奶、一些草和可可豆 || 4 分钟 || ? || 任何<br /> |-<br /> | 恒河水 || 13 灵魂沙、一点骨粉、几个墨囊 || 6 分钟 || ? || 黑橡木<br /> |}<br /> <br /> [[Category:游玩指南]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E8%B6%A3%E5%91%B3%E9%9B%86%E5%B8%82&diff=222 2026-08-20T11:04:51Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>== 摊位功能介绍 ==<br /> <br /> === 如何前往&amp;退出趣味集市 ===<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E8%B6%A3%E5%91%B3%E9%9B%86%E5%B8%82/01.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E8%B6%A3%E5%91%B3%E9%9B%86%E5%B8%82/02.png&lt;/div&gt;<br /> <br /> 有两种方式可以前往趣味集市，首先可以通过与主城 集市向导NPC 瑶瑶 对话前往，关于 NPC 的位置可以在本板块 [[趣味生存/主城介绍|关于主城部分介绍]] 中的导览图找到。<br /> <br /> 而更为便捷的方式，直接打开游戏菜单，在第一页中找到下界之心样式的趣味集市按钮，进入页面后点击第一个按钮前往趣味集市即可。<br /> <br /> === 如何租赁与续费摊位 ===<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E8%B6%A3%E5%91%B3%E9%9B%86%E5%B8%82/03.png&lt;span class=&quot;kw-figcaption&quot;&gt;2025-06-25_18.48.55_4K.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> 这是位于集市中的一个普通小摊头，在摊头左侧外立面的租赁牌上，我们可以看到摊头的租赁情况、租赁费用、摊主信息和摊主租赁的时长（&lt;s&gt;用于判断摊主是否即将跑路&lt;/s&gt;）。<br /> <br /> 当租赁牌上显示绿色字样的 出租 二字时，此摊位属于待租赁状态，玩家可以右键租赁牌，即可租赁该摊位一天，多次点击可叠加租赁时长（需要注意的是，右键后没有弹窗直接租赁，所以没有租赁意愿的千万别手欠乱点）。小摊位的最长租赁时长为: 14天，大摊位的租赁时长为: 30 天。<br /> <br /> 请不要一个人租赁过多的店铺，请给其他玩家空出多余的店铺，若发现出现占有过多摊位的现象，管理组有权做出相应的处罚。<br /> <br /> 而在摊位在过期后，系统会立刻将场地内所有东西清空并复原，请各位一定要注意关注摊位剩余的租赁时间，管理组不会补偿因为场地重置造成的损失！<br /> <br /> === 如何建设自己的摊位 ===<br /> <br /> 在租赁期间内，玩家可随意在自己的店铺内拆除或搭建方块（如果你同时买了处于同一位置不同楼层的店铺，可以使用粘液科技的 [ 简易电梯 ] 这样就可以实现两层店铺的上下联通。（位于整个集市拐角处的商店，由于商店插件的领地圈画只支持矩形，所以会有两个摊头租赁牌，所租赁下的店铺空间也只有租赁牌背后的那一半，所以建议对于需要大空间的玩家，可左右两边全部租下来，这样整个店面全是你的。）<br /> <br /> === 如何如何删除摊位 ===<br /> <br /> 如果你无意间购买了某间摊位，或者该摊位你已经全部清空完毕准备提前撤摊，可以蹲下后右键告示牌即可进入摊位售卖页面（当然，实际上是删除页面，毕竟卖了一分钱不得）<br /> <br /> [[Category:游玩指南]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E5%86%92%E9%99%A9%E8%80%85%E5%B7%A5%E4%BC%9A%E4%B8%8E%E7%B2%BE%E8%8B%B1%E6%80%AA&diff=221 2026-08-20T11:04:50Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>== 精英怪系统介绍 ==<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''事先说明：由于插件汉化的问题，很多道具和 ui 基本都没汉化。'''<br /> &lt;/div&gt;<br /> <br /> == 冒险者工会导览与鸟瞰图 ==<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E5%86%92%E9%99%A9%E8%80%85%E5%B7%A5%E4%BC%9A%E4%B8%8E%E7%B2%BE%E8%8B%B1%E6%80%AA/01.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E5%86%92%E9%99%A9%E8%80%85%E5%B7%A5%E4%BC%9A%E4%B8%8E%E7%B2%BE%E8%8B%B1%E6%80%AA/02.png&lt;/div&gt;<br /> <br /> '''事先说明：由于插件与地图的问题，冒险者工会中有很多 npc 无法对话或尚未汉化，很多副本地图都无法进入，所以该玩法注定会产生很多问题，请酌情选择。'''<br /> <br /> === 刷怪竞技场 ===<br /> <br /> 随着自身实力的发展，也是时候该证明自己的实力了！<br /> <br /> 通过 竞技场大师NPC ，前往竞技场内部。可选择与他人组队，或直接输入 /em start 开始对局。<br /> <br /> 竞技场里的怪物会随着你自身的实力与波次的推进，数量与难度将会越来高。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E5%86%92%E9%99%A9%E8%80%85%E5%B7%A5%E4%BC%9A%E4%B8%8E%E7%B2%BE%E8%8B%B1%E6%80%AA/03.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E5%86%92%E9%99%A9%E8%80%85%E5%B7%A5%E4%BC%9A%E4%B8%8E%E7%B2%BE%E8%8B%B1%E6%80%AA/04.png&lt;/div&gt;<br /> <br /> [[Category:游玩指南]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D&diff=220 2026-08-20T11:04:49Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>== 主城导览与鸟瞰图 ==<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/01.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/02.png&lt;/div&gt;<br /> <br /> == 主城建筑物介绍 ==<br /> <br /> &lt;s&gt;实际上这个板块介绍的前几个建筑都没啥用&lt;/s&gt;<br /> <br /> === 出生点 ===<br /> <br /> 进入主城时，玩家会出生在这一地方。<br /> <br /> 新手福利NPC 沐雪，位于出口的左侧，新人玩家可以与其对话并获得一套新手物资。（&lt;s&gt;超小声: 整个主城最有用的npc&lt;/s&gt;）<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/03.png&lt;span class=&quot;kw-figcaption&quot;&gt;出生点一览&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/04.png&lt;span class=&quot;kw-figcaption&quot;&gt;新手福利NPC&lt;/span&gt;&lt;/div&gt;<br /> <br /> === 粘液小屋 ===<br /> <br /> 玩家可在此处与粘液科技教程NPC 黏黏 展开对话，了解到关于粘液科技的相关内容（超小声: 谁能拒绝一个可以随时摸摸头的npc）<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/05.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/06.png&lt;/div&gt;<br /> <br /> === 冒险者工会 ===<br /> <br /> 玩家可在此处与冒险公会NPC 维克 展开对话，了解工会玩法的内容，加入或创建自己的工会。（&lt;s&gt;超小声: 更多情况下难道不是直接在菜单看这个功能吗&lt;/s&gt;）<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/07.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/08.png&lt;/div&gt;<br /> <br /> === 地狱传送门&amp;末地传送门 ===<br /> <br /> 虽然在主城可以走到这两个地方，但实际上你可以直接通过菜单快速传送到这两个地方，所以没什么好写的。（进入传送门应该都会的吧，但是要小心，使用错误的传送姿势会有小概率进入到无法逃脱的破损维度……其实是我瞎编的。）<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/09.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/10.png&lt;/div&gt;<br /> <br /> === 趣味商店 ===<br /> <br /> 在介绍该建筑时，推荐先前往 [ 占位 ] 板块，了解服务器的经济体系。<br /> <br /> 官方开设的系统商店与趣味集市中玩家租赁的店铺不同的是，物价良不良心不知道，但是物资储备绝对充足！你可以使用金币在商店中购买原版或粘液科技中的相关材料，有助于建设的快速发展。<br /> <br /> 商店目前仍处于建设中，存在大量闲置空位，各位可以填写 [ 占位 ] ，为商店的建设给出宝贵建议！<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/11.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/12.png&lt;/div&gt;<br /> <br /> === 魔法小屋 ===<br /> <br /> &lt;s&gt;一个放着附魔台的小木屋有必要说什么高大上吗喂&lt;/s&gt;，这里头只有一个原版附魔台，然后我们望向四周……这书架里的书多的和书架一样多，这花长得可真花啊……（话说，如果连附魔都不会，建议去 [https://zh.minecraft.wiki/w/Tutorial:%E6%9C%80%E4%BD%B3%E9%99%84%E9%AD%94%E6%8C%87%E5%8D%97?variant=zh-cn 附魔指南 | 我的世界中文wiki] 学习一下。）<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/13.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/14.png&lt;/div&gt;<br /> <br /> === 挂机池 ===<br /> <br /> 建设在一棵存在了千年，蕴含巨大魔力的古树之中，疑似是整个主城最有用的建筑物。你可以通过菜单中的传送菜单分类快速传送到挂机池，当然如果你闲的没事从主城走到挂机池不是不行。<br /> <br /> 整个挂机池共分成三层，每层所需的身份组不同，挂机奖励也不同：<br /> <br /> * 一层普通挂机池: 所有身份组的用户都可以在此处挂机并获取挂机奖励。<br /> * 挂机池奖励为:<br /> * 二层 Vip 挂机池: Vip 和 Vip+ 身份组的用户可以在此处挂机并获取挂机奖励。<br /> * 挂机池奖励为: 30经验瓶 / 10秒 ; 50枚金币 / 60秒（上限 10000 枚）<br /> * 三层 Vip+ 挂机池: Vip+ 身份组的用户可以在此处挂机并获取挂机奖励。(三层的入口处位于第二层楼梯的背面，详细可以见下方图二）<br /> * 挂机池奖励为: 60经验瓶 / 10秒 ; 300枚金币 / 60秒（上限 30000 枚）<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/15.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/16.png&lt;/div&gt;<br /> <br /> === 广告板 ===<br /> <br /> 创建了一个工会、开设了一家小商店、建造了一个流水线工厂，却始终没有什么流量。此时就可以在主城的广告板上，支付一定的金币，然后将自己要宣传的内容张贴出来！<br /> <br /> 需要注意的是，别想着在这个上边写一些奇奇怪怪的东西，请维护服务器环境哦！<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/17.png&lt;span class=&quot;kw-figcaption&quot;&gt;2025-06-25_17.33.19_4K.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> === 中心广场 ===<br /> <br /> 位于主城的中心，通过他延伸出的四条道路，可以前往主城中任何一个地方。<br /> <br /> 中心广场唯一的作用就是在夏天时钻在喷泉里，感受凉爽（事实上配合服务器的季节系统和温度系统，大热天钻在喷泉里确实能降温……）<br /> <br /> 广场的四角设有全服玩家的金币排行榜、在线时间排行榜、挖掘排行榜、点券排行榜和死亡排行榜（尚未想明白加入这个的目的）。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E8%B6%A3%E5%91%B3%E7%94%9F%E5%AD%98/%E4%B8%BB%E5%9F%8E%E4%BB%8B%E7%BB%8D/18.png&lt;span class=&quot;kw-figcaption&quot;&gt;2025-06-25_18.01.35_4K.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> [[Category:游玩指南]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E7%BA%AF%E5%87%80%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95&diff=219 2026-08-20T11:04:48Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>== 领地功能介绍 ==<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%BA%AF%E5%87%80%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95/01.png&lt;span class=&quot;kw-figcaption&quot;&gt;2025-06-26_12.03.47_4K.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> 这是位于生存世界中，一位玩家建设的生存小屋，样貌平平无奇，但在这荒郊野外，无疑是一个温馨的栖身之所。而这所小屋位于出生点不远处，经常有不少人来访，而其中必然有不怀好意之人。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%BA%AF%E5%87%80%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95/02.png&lt;span class=&quot;kw-figcaption&quot;&gt;2025-06-26_12.20.11_4K.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> 随着 tnt 的一声巨响，一个玩家耗费了数小时搭建起的小屋伴随他积攒了多日的物资灰飞烟灭（实际上生存世界是有开防爆和防火焰蔓延的，图中只是编者手动拆成这样的，当然这小屋本来就是现场造的）。<br /> <br /> 那么要如何避免自己的建筑被不速之客破坏、如何保障自己箱子中财产的安全呢？此时你就需要运用领地插件来有效管理你的地块，而它的作用，也绝非只有保护。<br /> <br /> === 如何创建&amp;管理领地 ===<br /> <br /> 打开菜单，找到左下角的木锄头样式的领地按钮，点击后会在聊天栏中弹出该插件的相关配置内容，后续的操作只需要点击 [按钮] 即可。（见图一）<br /> <br /> 而下文关于领地管理的部分，也将会在聊天栏中进行全部的操作（见图二）。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%BA%AF%E5%87%80%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95/03.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%BA%AF%E5%87%80%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95/04.png&lt;/div&gt;<br /> <br /> 虽然说主菜单中，有一个创建领地按钮，但是编者更加推荐你先进行地块的圈画，然后再进行领地的创建，这样子可以更好的控制领地的大小，也可以更好的节省你的金币。<br /> <br /> 我们的手上需要拿着原版的木锄头，来到所需要圈画领地的地块上，左右键分别选取领地的两个对角顶点（就是整个领地看成矩形，对角的俩点），圈画完毕后，插件会有粒子特效展示领地的圈画范围，如图下所示（如果什么粒子都没看到，记得视频设置里开启全部粒子效果展示）<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%BA%AF%E5%87%80%E7%94%9F%E5%AD%98/%E9%A2%86%E5%9C%B0%E7%8E%A9%E6%B3%95/05.png&lt;span class=&quot;kw-figcaption&quot;&gt;2025-06-26_12.06.20_4K.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> 在框选完范围后，我们在聊天栏输入 /dom create &amp;lt;领地名称&gt; 便可成功创建自己的领地，之后为了方便可以直接使用 /dom list 进入自己的领地列表。<br /> <br /> 在领地列表中，找到你所需要管理的领地，点击绿色的 [管理领地] 按钮，然后你就进入到了该领地的管理界面。<br /> <br /> 关于领地管理部分无需过多的介绍，所有的按钮插件内都有相关的解释。如果实在搞不清楚，可以前往 [https://dominion.lunadeer.cn/notes/doc/player/ 插件官方文档页面] ，里头有更多关于该插件的介绍<br /> <br /> === 如何创建&amp;管理子领地 ===<br /> <br /> 站在你的领地范围中，使用木锄头像创建领地一样框选出子领地的范围（别超出领地的范围），框选完成后在聊天栏输入 /dominion create_sub &amp;lt;子领地名称&gt; &amp;lt;父领地名称&gt; 即可创建成功。<br /> <br /> 子领地的管理方式与领地相同，使用 /dom list 进入自己的领地列表后，找到你刚刚创建的子领地，即可进入该子领地的控制面板。<br /> <br /> 理论上你可以在子领地中在创建子领地，具体如何规划，取决于在座的各位万家了！<br /> <br /> === 注意事项 ===<br /> <br /> * 如果在你领地选址周围已经有其他领地，建议距离远一点，以免后续扩建时与其他领地产生冲突。<br /> * 请多运用领地管理中的权限组功能，不要将权限过多的给予某位成员！<br /> <br /> [[Category:游玩指南]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%B0%81%E7%A5%9E%E5%86%8C/CSCorelib%E5%88%B7%E7%89%A9%E8%B5%84%E4%BA%8B%E4%BB%B6%E8%B0%83%E6%9F%A5%E6%8A%A5%E5%91%8A&diff=218 2026-08-20T11:04:47Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>== \# 事件概述 ==<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''注：对于非主要参与者的处罚内容与事件后续结果，不在本报告展示'''<br /> &lt;/div&gt;<br /> <br /> 2025年7月4日，经管理组长期的调查取证，证实玩家 CSCorelib 在粘液空岛使用拓展插件漏洞，刷取大量物资，并意外让其他玩家获取该漏洞原理导致对服务器产生了严重影响。<br /> <br /> == \# 事件详细 ==<br /> <br /> 2025年6月底，管理组成员注意到涉事玩家的岛屿与其协作岛屿，发展速度异常。对此，管理组决定重点观察涉事玩家及其相关人员，并进行调查取证。<br /> <br /> 在对于该事件相关嫌疑人员的询问中，获得了如下图的关键性线索。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/CSCorelib%E5%88%B7%E7%89%A9%E8%B5%84%E4%BA%8B%E4%BB%B6%E8%B0%83%E6%9F%A5%E6%8A%A5%E5%91%8A/01.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/CSCorelib%E5%88%B7%E7%89%A9%E8%B5%84%E4%BA%8B%E4%BB%B6%E8%B0%83%E6%9F%A5%E6%8A%A5%E5%91%8A/02.png&lt;/div&gt;<br /> <br /> 在管理组成员确定了其存在刷物品的嫌疑与手法后，对于其岛屿与协作者身份岛屿展开搜查，发现了涉及物品刷取的流程的设备，并在其家中搜刮出大量物资（经过对于物品获取流程、时间、成本等内容的验证，确定此类物资绝非正常手段获取）。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/CSCorelib%E5%88%B7%E7%89%A9%E8%B5%84%E4%BA%8B%E4%BB%B6%E8%B0%83%E6%9F%A5%E6%8A%A5%E5%91%8A/03.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/CSCorelib%E5%88%B7%E7%89%A9%E8%B5%84%E4%BA%8B%E4%BB%B6%E8%B0%83%E6%9F%A5%E6%8A%A5%E5%91%8A/04.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/CSCorelib%E5%88%B7%E7%89%A9%E8%B5%84%E4%BA%8B%E4%BB%B6%E8%B0%83%E6%9F%A5%E6%8A%A5%E5%91%8A/05.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/CSCorelib%E5%88%B7%E7%89%A9%E8%B5%84%E4%BA%8B%E4%BB%B6%E8%B0%83%E6%9F%A5%E6%8A%A5%E5%91%8A/06.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/CSCorelib%E5%88%B7%E7%89%A9%E8%B5%84%E4%BA%8B%E4%BB%B6%E8%B0%83%E6%9F%A5%E6%8A%A5%E5%91%8A/07.png&lt;/div&gt;<br /> <br /> 至此，证实涉事玩家存在刷物品嫌疑。对于后续相关人员的调查处理正在进行中，针对主动承认交代的人员，管理组优先从轻处理。<br /> <br /> == \# 处理结果 ==<br /> <br /> 针对其行为 '''严重违反服务器规定、扰乱服务器正常发展节奏、涉及刷取的物品与后续产生的价值巨大''' ，经管理组决定，对其进行 '''''全服永久封禁''''' 处理。对于同样使用相关漏洞或因此收益的玩家，管理组成员已在事件发生后陆续'''''清点销毁违规所得，拆除使用违规获取的材料制成的机器''''' 并做出 '''''全服封禁 7~30 天''''' 处理！<br /> <br /> [[Category:历史资料]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8F%91%E5%B1%95%E6%8C%87%E5%8D%97/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B&diff=217 2026-08-20T11:04:46Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>&lt;div class=&quot;kw-notice&quot;&gt;<br /> 本指南由本服风纪委员 123456dsdsasd 提供，责任编辑 0ctber 参与排版调整工作。<br /> &lt;/div&gt;<br /> <br /> == 1. 认识逻辑工艺 ==<br /> <br /> 对于大多数粘液服务器来说，'''逻辑工艺'''是一个必不可少的附属。&lt;br /&gt;<br /> 它不仅能提供更便捷的方法来获取资源，'''大大减少玩家“玩粘液坐牢”的时间'''。&lt;br /&gt;<br /> 其提供的'''堆叠机器'''也为需要大量堆叠机器的玩家们提供了一个高效的解决方案。&lt;br /&gt;<br /> 总的来说，逻辑工艺在粘液科技生态中具有'''举足轻重的作用'''。<br /> <br /> == 2. 逻辑初步 ==<br /> <br /> === 2.1 快捷机器入门 ===<br /> <br /> 逻辑工艺拥有很详细的官方 Wiki：[https://github.com/m1919810/LogiTech/wiki Pages · m1919810/LogiTech Wiki]<br /> <br /> 在刚开始玩粘液的时候，可以制作一下逻辑的'''快捷机器'''。&lt;br /&gt;<br /> 与粘液原版的机器相比，它更加智能：<br /> <br /> * 你只需要把材料放进去，它就可以自动搜索配方并进行合成；<br /> * 每次最高支持合成 '''3456 个物品'''。<br /> <br /> 以'''快捷强化工作台'''为例：<br /> <br /> * 它不仅造价便宜、便于合成；<br /> * 甚至有时还能当成一个箱子来用。<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> （当然，如果您真想存大量东西，推荐使用 '''石质存储''' 或者 '''普通的存储单元'''。）<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> 如图：大部分快捷机器使用都是按照这个思路。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B/01.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> '''注意'''：大多数快捷机器无需电力即可合成，但 '''快捷无尽工作台''' 和 '''快捷生物芯片注入器''' 除外。<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''小技巧'''：您可以在'''快捷淘金机'''里面“抓时机”，如果抓对了，可以一次性把大量砂砾都转换成筛矿，是'''前期开荒发展必备技能'''。<br /> &lt;/div&gt;<br /> <br /> === 2.2 基础材料与 BUG 获取 ===<br /> <br /> 然后制作一些 '''布尔生成器'''、'''逻辑反应堆''' 和 '''逻辑工作台''' 来开始制作逻辑基础的材料。&lt;br /&gt;<br /> 您也许会好奇这个 '''BUG''' 怎么来？前期在这里获取：<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''每次点击都会刷新出来一个 BUG'''。<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B/02.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> '''布尔生成器'''可以制作 '''布尔组件 True 和 False'''。&lt;br /&gt;<br /> 如果您看不懂规则，可以这样操作：<br /> <br /> * 四周都放入'''圆石'''来生成 '''True'''；<br /> * 四周放入'''不同种类的矿粉'''来生成 '''False'''。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B/03.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> '''逻辑反应堆'''注意事项：<br /> <br /> * 反应堆关闭时将不会进行反应；<br /> * 反应堆在反应时如果关闭开关，则会'''中止进程且不返还材料'''；<br /> * 在进程中，逻辑反应堆会清除材料栏中的物品；<br /> * 每次合成都会消耗 '''1 个逻辑门'''。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B/04.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> 在前期搞逻辑材料确实没什么好的办法，只能多做一点 '''布尔生成器'''，然后再用 '''网络''' 大量推送。&lt;br /&gt;<br /> 后面可以用 '''逆生成器''' 替代掉。<br /> <br /> === 2.3 进阶材料与设备 ===<br /> <br /> * '''悖论'''需要用 '''虚空量子发电机''' 来获取，可以用 '''链式网络插口(3)''' 来辅助，会有奇效。<br /> * 然后你还需要制作出来 '''维度矿机''' 来获取 '''星辰金砂''' 和 '''维度碎片'''，以进入下个阶段。<br /> * 对于 '''逻辑引擎'''、'''逻辑引擎立场''' 等需要用 '''BUG 工作台''' 合成的东西，你可以用 '''逻辑模拟合成站''' 来实现自动化。<br /> <br /> === 2.4 超新星系统搭建 ===<br /> <br /> 当你收集了足够的材料时，你可以尝试进行下一步了：<br /> <br /> # 做出一个 '''概念化序列构造器'''，按照里面的配方按顺序输入即可制作各种核心。<br /> # 然后在赤石科技里面把 '''空间框架制造机''' 制作出来。（可以用扳手拆掉它）<br /> # 制作一个 '''超新星模拟器'''：<br /> * 找一块平坦的地方，推荐在天上或地下；<br /> * 放在水平面上 '''4 格高''' 的地方；<br /> * 点击右上角的 '''全息投影'''；<br /> * 使用空间框架制造机制作足够的 '''超新星防护罩/框架''' 并开始搭建。<br /> <br /> 在搭建好之后，恭喜您，您做出来了一个超新星，可以使用它来生产更高级的材料。&lt;br /&gt;<br /> '''但要注意，现在还不能直接使用它！'''<br /> <br /> ==== 重要安全警告： ====<br /> <br /> * 推荐使用 '''5 个一阶压缩风力发电机'''；<br /> * '''每个超新星要单独供电，使用单独一个能源网络'''；<br /> * '''必须把超新星模拟器这个方块和能源网络放置在同一区块内'''，否则超新星模拟器有可能爆炸，并产生很严重的后果；<br /> * 推荐在 &lt;code&gt;/is settings&lt;/code&gt; 里面把爆炸关掉，能减少超新星爆炸带来的损失；<br /> * &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B/05.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> * '''千万要保证超新星的供电能跟得上需求'''；<br /> * '''严禁在超新星运行时破坏结构'''；<br /> * 推荐您多做几个超新星，一般 '''5 个差不多'''。<br /> <br /> 做完之后您可能不会启动它？这里你需要用到 '''超链接'''：<br /> <br /> * 用 '''超链接''' 绑定一下 '''超新星模拟器'''；<br /> * 然后在外面您就可以访问 '''超新星模拟器''' 并成功启动它了。<br /> * '''超链接也可以打开其他的粘液物品'''。<br /> <br /> === 2.5 智能控制核心制作 ===<br /> <br /> 这里稍微提一下怎么制作 '''智能控制核心'''：<br /> <br /> # 先在 '''简易光刻机''' 里面用 '''薯片合金''' 和 '''唯一性''' 制作一个 '''CHIP'''；<br /> # 然后在 '''单目位运算执行单元''' 里面：<br /> * 先放入 '''存在性'''，再放入 '''反逻辑'''；<br /> * 并循环下去；<br /> # 最终你就能得到一个内存为 &lt;code&gt;10101010101010101010101010101010&lt;/code&gt; 的 '''CHIP'''。<br /> <br /> === 2.6 星辰金锻造炉 ===<br /> <br /> 之后你需要制作一个 '''星辰金锻造炉'''，来制作更高级的合金。<br /> <br /> == 3. 逻辑中期：元素嬗变 ==<br /> <br /> 在收集了足够的材料后，是时候开始搭建 '''嬗变''' 了：<br /> <br /> # 先做出来一个 '''元素嬗变机'''；<br /> # 找一块平坦的地方，推荐还是在天上；<br /> # 在水平面高 '''1 格''' 的位置放下元素嬗变机；<br /> # 点开全息投影；<br /> # 在空间框架制造机里面制作出足够的 '''框架'''、'''防护罩''' 和 '''原子合金燃料棒'''。<br /> <br /> 一个嬗变一共可以建 '''14 层'''，层数越多，进程时间越短。&lt;br /&gt;<br /> 嬗变工作条件在超新星的基础上还需要满足：'''两种冷却剂'''，推荐用 '''无尽的极寒冰柜''' 来制作。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B/06.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B/07.png&lt;/div&gt;<br /> <br /> ==== 注意事项： ====<br /> <br /> * 同样是 '''单个嬗变单独供电，单独一个能源网络'''；<br /> * '''必须保证元素嬗变机和能源系统在同一区块内'''；<br /> * 推荐用 '''1 个量子超频发电机 + 4 个二阶压缩风力发电机''' 来供电；<br /> * 推荐搭建 '''15 台满级嬗变'''；<br /> * 前期可以用 '''充能原子合金''' 当材料，后期推荐用 '''秘银''' 和 '''钯金''' 当做材料。<br /> <br /> == 4. 逻辑末期 · 终章：超越领域 ==<br /> <br /> 在做出了 '''元素嬗变机''' 之后，想必您已经积攒了不少的资源。&lt;br /&gt;<br /> 对于一般的玩家来说，逻辑发展到元素嬗变机就已经足够了。&lt;br /&gt;<br /> 当然，如果您想要迈入逻辑的终极领域也是可以的。<br /> <br /> === 4.1 终极概念凝聚者与反概念物质 ===<br /> <br /> 终章第一步就是先做出来一个 '''终极概念凝聚者'''，有了它才能开始制作：<br /> <br /> * '''终极逻辑框架'''<br /> * '''逻辑核心'''<br /> <br /> 然后您需要在 '''星辰金锻造炉''' 里面制作出来一个 '''反概念物质'''，有了它就可以大量获取逻辑核心。<br /> <br /> === 4.2 终极合成机制 ===<br /> <br /> 但您也许会好奇：该怎么才能快速输入 1919810 个矿粉呢？&lt;br /&gt;<br /> 在这里就需要用到逻辑的另一大神器——'''终极合成机制'''。<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''长话短说'''：终极合成机制可以解决机器工作但槽位太少或不够的限制。<br /> 它能直接让机器与存储方块交互，绕过机器槽位存储这一环节。<br /> 也就是说，利用这个机制，哪怕是机器一下子能产出 3456 组物品，也能立马存入存储设备，而不是像以前一样让多出来的产品白白浪费掉。<br /> &lt;/div&gt;<br /> <br /> ==== 实际操作步骤： ====<br /> <br /> # 先制作一个 '''量子纠缠奇点'''；<br /> # 把 '''九种矿粉''' 都存放在 '''网络原版的量子存储设备''' 里（'''不可以用网络抽屉，暂不支持'''）；<br /> # 用 '''量子纠缠奇点''' 绑定一下该量子存储设备，就像按照超链接绑定那样操作即可；<br /> # 然后打开 '''终极概念凝聚者'''，按照顺序依次放入相对应的量子纠缠奇点，这样就能一下子把所需要的材料直接输入进去了。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B/08.png&lt;span class=&quot;kw-figcaption&quot;&gt;1.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''恭喜你，你学会了怎么使用终极合成机制！'''<br /> 要注意：'''只有明确标注支持终极合成机制的机器才可以使用'''。<br /> &lt;/div&gt;<br /> <br /> === 4.3 反概念物质使用指南 ===<br /> <br /> 然后回到 '''反概念物质'''：<br /> <br /> * 在使用前我们建议您最好还是把这玩意收起来；<br /> * 特别是拿着它离产线远一点，否则您的产线就有可能被它全部吃掉哦。<br /> <br /> 具体操作：<br /> <br /> # 在末地或者其他地方搭建一个水池，大小为 '''100×100×100'''；<br /> # 准备好了之后，在水池中央放下 '''反概念物质'''；<br /> # 它就会开始不断同化周围的方块。<br /> <br /> ==== 注意事项： ====<br /> <br /> * 在反概念物质工作时，'''TPS 下降属正常现象'''；<br /> * 您'''最多只能同时放下一个'''反概念物质；<br /> * 在反概念物质工作时，'''最好保持空手状态'''，或者不要随意切换手上的物品；<br /> * 在同化过程中，您会发现一些无法挖掘的“命令方块”——这也是正常现象，'''无视即可'''；<br /> * 然后您只需要挖掉“'''幽匿块'''”就可以获得 '''逻辑核心''' 了。<br /> <br /> === 4.4 祭坛系统 ===<br /> <br /> 在之后就是攒材料做 '''祭坛'''、'''物质重塑'''、'''属性量化''' 的过程了。<br /> <br /> * 想让祭坛发挥出真正的作用，需要 '''二级祭坛'''。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B/09.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> 如何搭建祭坛？只需按照自带的投影即可：<br /> <br /> * “发射器” = '''宏激光发射器'''；<br /> * '''二级祭坛''' 是在 '''五个一级祭坛''' 的基础上建成的。<br /> <br /> '''终极祭坛''' 运行需要耗费大量的电力，这里可以使用：<br /> <br /> * '''四个量子超频发电装置'''<br /> * '''四组方舟反应堆''' 来发电<br /> <br /> &lt;div class=&quot;kw-notice kw-notice--warn&quot;&gt;<br /> '''注意'''：宏激光发射器射出的激光会造成大量伤害，并且会杀死任意实体（包括掉落物）！<br /> 如果要更换机器，请在'''停电之后'''进行操作。<br /> &lt;/div&gt;<br /> <br /> === 4.5 物质与属性重塑 ===<br /> <br /> * '''物质量化重塑器'''：<br /> 输入任意物品，可以转化为别的物品，物品种类和数量随机。&lt;br /&gt;<br /> 目前只能产出原版物品以及逻辑科技部分物品。<br /> * '''属性量化重塑器'''：<br /> 可以给您的物品进行强化，它会不断地往物品上添加任意附魔或属性，您可以借此打造一把特别强力的武器。<br /> <br /> 由于属性量化重塑器每次提供的增幅不一定是我们想要的，所以我们可以在 '''锻造工坊''' 的 '''属性操作仪''' 中对其进行修改。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B/10.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> ==== 属性操作仪使用说明（GUI 界面）： ====<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E9%80%BB%E8%BE%91%E5%B7%A5%E8%89%BA%E6%95%99%E7%A8%8B/11.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> * 在 '''槽位1 和 槽位2''' 中放入想要操作的物品；<br /> * 机器的运行逻辑是：将槽位1中物品的附魔/属性转移到槽位2中物品上面；<br /> * 可以点击 '''“附魔修改”''' 或 '''“属性修改”''' 来挑选想要修改的附魔/属性；<br /> * 左击/右击都可以，只是查找顺序不同；<br /> * '''“橙色玻璃板”'''：<br /> * 左边为修改附魔，右边为修改属性；<br /> * 可供一次性修改单个或全部的附魔/属性；<br /> * 在挑选完之后，只需按下对应侧的“橙色玻璃板”即可完成修改；<br /> * 槽位1的物品会输出到槽位3；槽位2的物品会输出到槽位4；<br /> * 位于中间的 '''“红色玻璃板”''' 为强制附魔选项：<br /> * 一般来说这个选项没什么用处；<br /> * 在打开之后，如果您槽位2放入的是书，则操作完之后会输出一本附魔书（仍保持书的形态）。<br /> <br /> == 5. 补充与提醒 ==<br /> <br /> 为了使内容简洁，本教程仅讲解了重要部分，但仍保留以下实用细节：<br /> <br /> * '''逻辑工艺 GUI 可以翻页'''，第二页有些好玩的东西，可以点一点，要当心哦。<br /> * 在使用 '''物质量化重塑器'''、'''逻辑反应堆'''、'''宏激光发射器''' 的时候要小心，'''不要把重要的东西丢进去，出了事就哭吧你'''。<br /> * '''远程传输器是个好东西，可以用一用'''。<br /> * '''终极堆叠里面的机器也可以支持终极合成的特性'''，只需要把机器装在 '''量子存储设备''' 里面就可以喽。<br /> <br /> ----<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''逻辑工艺附属教程到此结束！'''<br /> 感谢您阅读本教程，祝您游戏愉快，早日毕业！<br /> &lt;/div&gt;<br /> <br /> [[Category:游玩指南]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8F%91%E5%B1%95%E6%8C%87%E5%8D%97/%E7%BD%91%E7%BB%9C%E6%8B%93%E5%B1%95%E6%95%99%E7%A8%8B&diff=216 2026-08-20T11:04:46Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>&lt;div class=&quot;kw-notice&quot;&gt;<br /> 本指南由本服风纪委员 123456dsdsasd 提供，责任编辑 0ctber 参与排版调整工作。<br /> &lt;/div&gt;<br /> <br /> == 1. 认识网络 ==<br /> <br /> === 1.1 什么是网络？ ===<br /> <br /> 网络是 Slimefun 的一个附属，为玩家提供了一个更加方便、强大的货运系统。&lt;br /&gt;<br /> 与原版粘液货运相比，它更直观、更方便，深受各大粘液玩家喜爱。<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> （参考：粘液附属中文 Wiki 对网络的定义）<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E7%BD%91%E7%BB%9C%E6%8B%93%E5%B1%95%E6%95%99%E7%A8%8B/01.png&lt;span class=&quot;kw-figcaption&quot;&gt;1.png&lt;/span&gt;&lt;/div&gt;<br /> 因为网络附属的 Wiki 较为完善，'''建议遇到不懂的内容优先查阅'''[https://slimefun.wiki/ 官方 Wiki]。<br /> &lt;/div&gt;<br /> <br /> 本教程仅选取部分'''重要内容'''进行讲解。<br /> <br /> == 2. 网络初步 ==<br /> <br /> === 2.1 搭建基础网络系统 ===<br /> <br /> 要搭建一个网络系统，首先需要：<br /> <br /> * '''网络控制器'''<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''没有网络控制器，整个网络会立即瘫痪！'''<br /> &lt;/div&gt;<br /> <br /> 然后可以放置各类功能方块，例如：<br /> <br /> * 网络推送器 / 抓取器<br /> * 网络原版推送器 / 抓取器<br /> * 网络监视器<br /> <br /> ===== 方向设置： =====<br /> <br /> * 这些功能方块'''需要手动设置方向'''才能工作；<br /> * 右键打开 GUI，可选择 '''东、西、南、北、上、下''' 六个方向；<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E7%BD%91%E7%BB%9C%E6%8B%93%E5%B1%95%E6%95%99%E7%A8%8B/02.png&lt;span class=&quot;kw-figcaption&quot;&gt;1.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> * 设置成功后，方块会显示'''附魔光效'''，并有提示。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E7%BD%91%E7%BB%9C%E6%8B%93%E5%B1%95%E6%95%99%E7%A8%8B/03.png&lt;span class=&quot;kw-figcaption&quot;&gt;1.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;div class=&quot;kw-notice kw-notice--warn&quot;&gt;<br /> '''注意'''：<br /> 有些粘液物品'''自带附魔光效'''，请务必确认是否真的设置了方向！<br /> &lt;/div&gt;<br /> <br /> === 2.2 网络连接 ===<br /> <br /> 搭建完后若发现网络不工作，很可能是因为'''未正确连接'''。<br /> <br /> * 网络方块需'''连成一体'''，类似红石电路；<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E7%BD%91%E7%BB%9C%E6%8B%93%E5%B1%95%E6%95%99%E7%A8%8B/04.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E7%BD%91%E7%BB%9C%E6%8B%93%E5%B1%95%E6%95%99%E7%A8%8B/05.png&lt;/div&gt;<br /> <br /> * 大多数网络方块（如推送器、抓取器）'''自身可作为连接节点'''；<br /> * '''最常用连接方块'''：'''网桥'''（即白色染色玻璃）；<br /> * '''例外'''：'''网络量子存储无法提供连接作用'''！<br /> <br /> === 2.3 网络电力系统 ===<br /> <br /> 网络拥有独立的电力系统，用于驱动合成机、链式设备等。<br /> <br /> * 要为网络供电，需使用 '''网络电容'''；<br /> * 将网络电容：<br /> # 放置在'''能源网络辐射范围内'''；<br /> # 同时'''与网络系统物理连接'''；<br /> * 完成后，网络系统即拥有电力，用电设备可正常工作。<br /> <br /> &lt;div class=&quot;kw-notice kw-notice--warn&quot;&gt;<br /> '''提示'''：使用 '''插入网格''' 可更直观地操作网络。<br /> &lt;/div&gt;<br /> <br /> == 3. 网络的存储 ==<br /> <br /> 作为一个货运系统，'''存储是核心功能'''。<br /> <br /> === 3.1 网络单元 ===<br /> <br /> * 提供基础存储，容量≈一个大箱子；<br /> * 适用于'''物品种类多、数量少'''的轻量存储场景。<br /> <br /> === 3.2 网络量子存储 ===<br /> <br /> * 适用于'''大量单一物品'''的存储；<br /> * '''必须配合网络监视器'''才能工作（与网络单元不同）。<br /> <br /> ===== 操作界面说明（GUI）：、 =====<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E7%BD%91%E7%BB%9C%E6%8B%93%E5%B1%95%E6%95%99%E7%A8%8B/06.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E7%BD%91%E7%BB%9C%E6%8B%93%E5%B1%95%E6%95%99%E7%A8%8B/07.png&lt;/div&gt;<br /> <br /> * '''左侧绿色染色玻璃'''：输入口<br /> * '''右侧橙色染色方块'''：输出口<br /> * '''下方粉红色/红色染色玻璃'''：快速存入 / 快速取出<br /> * '''中间红色染色方块'''：显示当前存储物品类型（需手动设置）<br /> * 设置方法：手持目标物品，点击下方'''黄绿色染色玻璃板'''<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''实用功能'''：'''满载清空'''<br /> <br /> * 当存储空间满时，仍可接收物品，但'''直接销毁'''而非存储；<br /> * 适用于矿粉产线、原版矿物产线等场景。<br /> &lt;/div&gt;<br /> <br /> === 3.3 网络抽屉（高级存储） ===<br /> <br /> * 是 '''网络单元的升级版'''；<br /> * 一个网络抽屉 ≈ 多个网络量子存储；<br /> * 可同时管理'''多种物品'''，大幅简化产线布局。<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''懒人福音'''：更精简、更方便、更高效！<br /> '''安全建议'''：'''务必记下你的网络抽屉 ID'''，以防丢失。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E7%BD%91%E7%BB%9C%E6%8B%93%E5%B1%95%E6%95%99%E7%A8%8B/08.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> === 3.4 物品转移工具 ===<br /> <br /> * 在转移大量物品时，可使用 '''物品转移棒''' 辅助操作。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E7%BD%91%E7%BB%9C%E6%8B%93%E5%B1%95%E6%95%99%E7%A8%8B/09.png&lt;span class=&quot;kw-figcaption&quot;&gt;1.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> == 4. 对网络的进一步研究 ==<br /> <br /> 掌握基础后，可进阶使用以下功能以提升效率：<br /> <br /> === 4.1 网络链式方块 ===<br /> <br /> * 位于 '''网络拓展 → 货运与存储''' 的第二、三页；<br /> * 可自动对'''连续区域'''内的粘液方块进行抓取/推送；<br /> * '''无限制模式'''：突破单方块交互限制，实现“无限火力”！<br /> <br /> &lt;div class=&quot;kw-notice kw-notice--warn&quot;&gt;<br /> '''重要提示'''：<br /> <br /> * 网络链式机器'''仅服务粘液方块'''；<br /> * 所服务方块必须'''连续且同类型'''；<br /> * '''会产生明显卡顿'''，建议'''不要过度依赖'''，以免影响 TPS。<br /> &lt;/div&gt;<br /> <br /> === 4.2 网络规模限制 ===<br /> <br /> * 每个网络有'''最大节点数限制'''（防卡服机制）；<br /> * 可使用 '''网络探测器''' 右键网络控制器，查看详细信息（如当前节点数、上限等）。<br /> <br /> === 4.3 远程访问方案 ===<br /> <br /> * '''网络远程访问器'''：可远程操作网格；<br /> * '''更推荐替代方案'''（造价更低）：<br /> * 位置记录仪<br /> * 超链接<br /> * 量子纠缠奇点<br /> <br /> ----<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> 为使内容简洁，本教程仅讲解了重要部分。<br /> '''网络附属教程到此结束！'''<br /> 祝您游戏愉快，产线畅通无阻！<br /> &lt;/div&gt;<br /> <br /> [[Category:游玩指南]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8F%91%E5%B1%95%E6%8C%87%E5%8D%97/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B&diff=215 2026-08-20T11:04:45Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>&lt;div class=&quot;kw-notice&quot;&gt;<br /> 本指南由本服风纪委员 123456dsdsasd 提供，责任编辑 0ctber 参与排版调整工作。<br /> &lt;/div&gt;<br /> <br /> == 1. 原版粘液 ==<br /> <br /> === 1.1 准备工作 ===<br /> <br /> * 在群文件中下载一份'''粘液空岛材质包'''，有助于改善游戏体验。<br /> * 在聊天栏中输入 &lt;code&gt;/sfguide&lt;/code&gt;，获取一本'''粘液科技指南'''，开启您的粘液之旅。<br /> <br /> == 2. 机器 ==<br /> <br /> === 2.1 机器类型 ===<br /> <br /> 粘液机器分为三类：<br /> <br /> * '''多方块机器'''<br /> * '''单方块机器'''<br /> * '''头颅机器'''<br /> <br /> 部分机器需要电力才能工作，例如：<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/01.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> ⚡ 带有'''黄色闪电符号'''的为电力机器。<br /> &lt;/div&gt;<br /> <br /> === 2.2 获取方式 ===<br /> <br /> * '''单方块机器'''和'''头颅机器'''通过合成表获取；<br /> * '''多方块机器不可直接合成'''，需'''手动摆放结构'''。<br /> <br /> ==== 多方块机器搭建示例： ====<br /> <br /> # 按照指南书中的结构图摆放（通常为 3×3×3 结构）；<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/02.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/03.png&lt;/div&gt;<br /> <br /> # 摆放完成后右键工作台，会提示：<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/04.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> # 在发射器中放入材料，再次右键即可合成。<br /> <br /> &lt;div class=&quot;kw-notice kw-notice--warn&quot;&gt;<br /> '''注意'''：<br /> <br /> * '''冶炼炉'''中的“打火石”表示：'''发射器下方必须有火焰'''；<br /> * 可使用'''自动点火机'''辅助：先点火，再放入打火石；<br /> * 推荐将发射器下方方块换成'''下界岩'''（耐烧）。<br /> * 古代机器摆放方式：<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/05.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> === 2.3 解锁与界面 ===<br /> <br /> * 浏览粘液书时若看到'''屏障方块'''，表示该项目被锁定；<br /> * 需完成其'''前置项目'''（如“能源与电力”需解锁所有基础机器）。<br /> * 若觉得解锁动画/烟花太慢：<br /> * '''蹲下右键粘液书'''进入配置界面；<br /> * 关闭第二项（动画）和第三项（烟花）即可。<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''指南书界面说明'''：<br /> <br /> * 左侧：所需机器<br /> * 中间：所需材料<br /> * 右侧：合成结果<br /> &lt;/div&gt;<br /> <br /> == 3. 能源与电力 ==<br /> <br /> === 3.1 搭建能源网络 ===<br /> <br /> # 放置一个'''能源调节器'''（核心）；<br /> # 连接'''发电机'''（发电）和'''用电机器'''；<br /> # 电力会自动输送至范围内设备；<br /> # 可接入'''电容'''存储多余电量；<br /> # 使用'''能源连接器'''扩展供电范围。<br /> <br /> === 3.2 供电范围 ===<br /> <br /> * '''能源调节器 / 能源连接器'''供电范围：<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/06.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> * 上下各 7 格，前后左右各 7 格；<br /> * '''无法斜向供电'''；<br /> * '''无需电线逐格连接'''——只要在范围内即可供电。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/07.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> &lt;div class=&quot;kw-notice kw-notice--warn&quot;&gt;<br /> '''提示'''：圆石覆盖区域即为有效供电区。<br /> &lt;/div&gt;<br /> <br /> == 4. 科技工具 ==<br /> <br /> * 部分科技工具（如'''革钢镐'''）需'''充电'''才能使用；<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/08.png&lt;span class=&quot;kw-figcaption&quot;&gt;1.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> * 充电方式：在'''能源与电力'''分类中使用'''充电台'''。<br /> <br /> == 5. 基于 GPS 的机器 ==<br /> <br /> === 5.1 GPS 发射器 ===<br /> <br /> 不同等级的 GPS 发射器提供不同'''GPS 信号复杂度'''，且与'''高度'''相关：<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! 等级 !! 可存储能量 !! 电力消耗 !! 等级倍数 !! 等级奖励<br /> |-<br /> | GPS发射器 || 16J || 2J/t || 1 || 0<br /> |-<br /> | 高级GPS发射器 || 64J || 6J/t || 4 || 100<br /> |-<br /> | 黑金刚石GPS发射器 || 256J || 22J/t || 16 || 500<br /> |-<br /> | 充能GPS发射器 || 1024J || 92J/t || 64 || 600<br /> |}<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''信号复杂度公式'''：<br /> &lt;code&gt;等级倍数 × 高度 + 等级奖励&lt;/code&gt;<br /> &lt;/div&gt;<br /> <br /> === 5.2 GPS 传送阵 ===<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/09.png&lt;span class=&quot;kw-figcaption&quot;&gt;1.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> * 用于快速传送；<br /> * 搭建组件：<br /> * GPS信号塔<br /> * GPS传送矩阵<br /> * GPS激活设备<br /> <br /> ==== 传送时间计算： ====<br /> <br /> ===== &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/10.png&lt;span class=&quot;kw-figcaption&quot;&gt;1.png&lt;/span&gt;&lt;/div&gt; =====<br /> <br /> == 6. 可编程式机器人 ==<br /> <br /> * 机器人可执行自动化任务：砍树、钓鱼、挖矿、打怪等；<br /> * '''必须加载脚本'''才能运行（脚本 = 指令集）；<br /> * 可从服务器下载他人脚本，或自行编写。<br /> <br /> ==== 使用步骤： ====<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/11.png&lt;span class=&quot;kw-figcaption&quot;&gt;1.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> # 在'''内存编辑器'''中写入/加载脚本；<br /> # 放入'''燃料'''；<br /> # 点击'''启动按钮'''。<br /> <br /> &lt;div class=&quot;kw-notice kw-notice--warn&quot;&gt;<br /> '''注意事项'''：<br /> <br /> * 可用'''机器人交互接口'''补充燃料/存取物品；<br /> * '''渔夫机器人'''必须'''自身下方为水源'''才能钓鱼。<br /> &lt;/div&gt;<br /> <br /> == 7. 货物管理 ==<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''推荐'''：后期使用更强大的'''网络货运系统'''（见网络教程）。<br /> &lt;/div&gt;<br /> <br /> === 7.1 基础搭建 ===<br /> <br /> * 核心组件：'''货运管理器'''；<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/12.png&lt;span class=&quot;kw-figcaption&quot;&gt;1.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> * 扩展组件：<br /> * 货运连接器（扩大范围）<br /> * 货运节点（输入/输出）<br /> <br /> === 7.2 节点功能 ===<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/13.png&lt;span class=&quot;kw-figcaption&quot;&gt;1.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> * '''输入节点'''：从容器 → 货运网络<br /> * '''输出节点'''：从货运网络 → 容器<br /> * 节点贴在哪，就对哪个容器操作。<br /> <br /> ==== 白名单和黑名单模式： ====<br /> <br /> * '''白名单模式'''：只传输'''格子中放置的物品'''；<br /> * '''黑名单模式'''：传输'''除格子中物品外的所有物品'''；<br /> * 切换方式：点击 GUI 中“书与笔”旁的'''羊毛'''。<br /> <br /> === 7.3 应用示例：矿粉产线 ===<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/14.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8E%9F%E7%89%88%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%95%99%E7%A8%8B/15.png&lt;/div&gt;<br /> <br /> * 将'''输入节点'''设为'''黑名单模式'''，内部'''不放任何物品'''；<br /> * 即可将矿粉生产器产出的'''所有矿粉'''自动送入旁边箱子。<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''信道ID'''：可用于区分多条独立货运线路。<br /> '''高级输出节点'''：支持向单一容器输送更多种类物品。<br /> &lt;/div&gt;<br /> <br /> ----<br /> <br /> 为使内容简洁，本教程仅讲解了重要部分，'''原版粘液教程到此结束！'''&lt;br /&gt;<br /> 祝您游戏愉快，自动化产线高效运转！<br /> <br /> [[Category:游玩指南]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E5%8F%91%E5%B1%95%E6%8C%87%E5%8D%97/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B&diff=214 2026-08-20T11:04:44Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>&lt;div class=&quot;kw-notice&quot;&gt;<br /> 本指南由本服风纪委员 123456dsdsasd 提供，责任编辑 0ctber 参与排版调整工作。<br /> &lt;/div&gt;<br /> <br /> == 1. 前言 ==<br /> <br /> 乱序技艺可以称得上是粘液科技中'''难度最高的附属之一'''。&lt;br /&gt;<br /> 原因在于：<br /> <br /> * 相关教程稀少；<br /> * 引入了大量全新机制。<br /> <br /> 这导致初次游玩的玩家常常面临以下困境：<br /> <br /> * 不清楚高级材料的获取方式；<br /> * 不会使用新机器。<br /> <br /> 尤其是在改版后，这种情况更加严重。<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''遗憾的是，本教程无法保证讲解所有内容，还请谅解。'''<br /> &lt;/div&gt;<br /> <br /> == 2. 乱序技艺初步 ==<br /> <br /> === 2.1 基础设备制作 ===<br /> <br /> * 首先需要制作 '''嵌齿轮'''（支持在普通工作台合成）。<br /> * 然后制作：<br /> * '''不合理工作台'''<br /> * '''矩阵合成台'''（用于合成更高级的乱序工具和机器）<br /> <br /> ==== 不合理工作台使用说明： ====<br /> <br /> * 合成时需点击中间的'''雕纹石砖'''；<br /> * 与原版粘液不同，合成成功后物品会'''从发射器面朝的方向发射出去'''；<br /> * '''强烈建议'''用方块挡住前方，否则物品可能被虚空吞掉。<br /> <br /> &lt;div class=&quot;kw-notice kw-notice--warn&quot;&gt;<br /> '''重要提示'''：<br /> 矩阵合成台所需的末影箱因世界保护 BUG 无法合成，可改用'''合成器'''或'''快捷工作台'''合成。<br /> &lt;/div&gt;<br /> <br /> ==== 卡片制造台（可选） ====<br /> <br /> * 对于需求不高的玩家可不做；<br /> * 用于获取'''奇点'''、'''螺旋体'''、'''伪物'''等非常高级的乱序材料。<br /> <br /> === 2.2 尘埃与核心材料获取 ===<br /> <br /> * '''有序尘埃 / 无序尘埃'''：通过'''尘埃制造机'''获取。<br /> * 制作思路参考“原始物质α/β”。<br /> * 以“圆石”形状的尘埃制造机为例：<br /> * '''有序尘埃'''：输入'''相同种类'''的物品，且'''数量不重复'''；<br /> * '''无序尘埃'''：输入'''不同种类'''的物品，且'''数量不重复'''。<br /> * '''小技巧'''：可尝试“全部圆石”或“一种矿粉+圆石”的组合。<br /> <br /> ==== 核心材料：盒与耀 ====<br /> <br /> * '''盒'''：需玩家在'''比世界高度上限高64格'''的位置死亡获得。<br /> * 当前空岛高度上限为 '''319格'''，因此需在 '''Y=383''' 处死亡。<br /> * '''耀'''：需玩家'''携带盒'''并'''跳入虚空'''获得。<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''推荐获取耀的方法'''：<br /> <br /> # '''不要手持盒'''，将其放在背包或物品栏中；<br /> # 确保身上'''没有其他耀'''；<br /> # '''清空身上物品'''，最好连盔甲也脱掉（物品过多会导致获取失败）；<br /> # 跳入虚空，受到伤害后检查背包，若有耀则获取成功。<br /> &lt;/div&gt;<br /> <br /> == 3. 一些材料的获取方法 ==<br /> <br /> === 3.1 以太与环 ===<br /> <br /> * '''以太'''：通过'''以太矿机'''获取。<br /> * 矿机所在区块需先用 '''GPS 扫描'''；<br /> * 每次输入 '''1个无序尘埃'''，矿机开始挖掘；<br /> * '''推荐在末地开采'''。<br /> * '''环'''：在'''卡片操作台'''中用任意'''复制卡'''获取。<br /> * '''复制卡'''用途：<br /> * 制作环；<br /> * 刷取卡内物品。<br /> * 获取复制卡需使用'''序列化构造机'''（普通构造机仅支持粘液物品）。<br /> * '''解析机'''可用于复制复制卡中的物品。<br /> <br /> === 3.2 锟斤拷与电卡 ===<br /> <br /> * '''锟斤拷'''：通过'''等价交换台'''获取。<br /> # 先在交换台中输入一些'''粘液物品'''以获得“价值”；<br /> # 再输入 '''1个无序尘埃'''；<br /> # 每次工作都有概率产出锟斤拷；<br /> # 产出后，交换台会'''自动清除剩余价值'''。<br /> * '''电卡'''：通过'''便携式能量存储器'''和'''电力合成台'''获取。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/01.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> # 用存储器吸取一个机器中的电力；<br /> # 将其放在合成台'''中间位置'''，即可输出电卡；<br /> # '''反向操作'''（存回电力）：<br /> * 堵住右侧输出口；<br /> * 中间放存储器，左侧放电卡。<br /> <br /> === 3.3 合理性与等概念体 ===<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/02.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> * '''合理性'''和'''等概念体'''需通过'''熵种'''获取。<br /> * '''熵种特性'''（与逻辑科技的反概念物质相似）：<br /> * 放下后会立刻转换成'''等概念体'''并开始扩散；<br /> * '''不会转化方块'''；<br /> * '''即使周围无方块也会继续扩散'''；<br /> * 产生的等概念体会在一段时间后'''自行消失'''，需及时挖掘。<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''安全获取方法'''：<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/03.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/04.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/05.png&lt;/div&gt;<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> # 制造一个封闭空间；<br /> # 在空间'''全方位无死角'''地倒上多层水（防止熵种向外扩散）；<br /> # 在此范围内放下熵种，即可安全获取掉落物。<br /> &lt;/div&gt;<br /> <br /> == &lt;div class=&quot;kw-figure&quot;&gt;图片占位&lt;/div&gt;4. 乱序——货运系统 ==<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''强烈推荐使用高级版货运机器'''！<br /> 普通版不仅功能不全，还可能出现各种 BUG。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/06.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> === 4.1 核心概念解析 ===<br /> <br /> * '''物品栏检索顺序'''：规定被检索物品栏中物品的'''传输顺序'''。<br /> * '''顺序：'''&lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/07.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> * '''逆序：'''&lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/08.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> * '''货运限制'''：规定一次性交互的'''物品槽数量'''（“无限制”=交互所有槽位）。<br /> * '''物品槽检索'''：规定'''输入栏'''和'''输出栏'''两大块中，哪个需要交互、哪个不需要，或哪个优先交互。<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''概念梳理'''：<br /> 检索顺序 → 规定交互方向；<br /> 物品槽检索 → 规定交互区域；<br /> 货运限制 → 在区域内细分交互数量。<br /> &lt;/div&gt;<br /> <br /> === 4.2 传输器详解 ===<br /> <br /> * '''对点传输器'''：<br /> * 传输方向：从'''底座'''朝向的方向 → '''头部'''朝向的方向。<br /> * '''坐标传输器'''：<br /> * 实现'''远程传输'''；<br /> * 将内部物品传输到'''位置记录仪'''记录的位置；<br /> * '''要求'''：下方必须有空位放置位置记录仪。<br /> * '''网状传输器'''：<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/09.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> * 与'''相邻六个方向'''（东西南北上下）的方块交互；<br /> * 左下角为'''黑/白名单'''物品栏；<br /> * '''右侧的输入/输出栏强制开启强对称模式'''。<br /> * '''乱序链式传输'''（对比网络链式）：<br /> * '''网络'''：一次性抓取/推送<br /> * &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/10.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;；<br /> * '''乱序'''：'''连续性'''转移物品。<br /> * &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/11.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> == 5. 乱序——有用的小玩意 ==<br /> <br /> * '''物品拆解台'''：<br /> * 可拆解部分物品，用于产线补救；<br /> * '''普通拆解台'''：需充能完毕才能使用；<br /> * '''自动拆解台'''：无需充能。<br /> * '''工程加速器 &amp; 电力加速器'''：<br /> * 加速电力机器工作速度，'''弥补了堆叠机器的空白'''。<br /> * '''射电桩'''：<br /> * 将电力向'''单一方向'''远距离传输（类似网络插口）。<br /> * '''供电机'''：<br /> * 为范围内的机器（范围大小如下图所示）'''直接充能'''，无需输入物品。<br /> * &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/servers/%E7%B2%98%E6%B6%B2%E7%A9%BA%E5%B2%9B/%E4%B9%B1%E5%BA%8F%E6%8A%80%E8%89%BA%E6%94%B9%E7%89%88%E6%95%99%E7%A8%8B/12.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> * '''过载供电机'''：<br /> * 提供更大范围的供能。<br /> <br /> == 6. 结语 ==<br /> <br /> 在看了这么多内容后，您可能还是一头雾水——'''这是正常现象'''。&lt;br /&gt;<br /> 因为乱序技艺与其他附属相比，确实'''难理解得多'''。<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> '''重要建议'''：<br /> 从'''毕业粘液'''的角度来看，'''推进乱序技艺进度并非必要'''。<br /> 您完全可以选择推进'''乱码科技'''来达到毕业目的。<br /> &lt;/div&gt;<br /> <br /> 最后，祝您玩得开心！&lt;br /&gt;<br /> '''乱序技艺改版教程暂时结束！'''<br /> <br /> [[Category:游玩指南]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AE%A1%E7%90%86%E7%BB%84&diff=213 2026-08-20T11:04:43Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>== 一、管理组成员职位表（更新日期2026年7月17日） ==<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! '''游戏id''' !! '''职务''' !! '''联系方式''' !! '''负责范围'''<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/admin/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AE%A1%E7%90%86%E7%BB%84/01.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (3).png&lt;/span&gt;&lt;/div&gt;''' kukemc''' || 群组服主 || QQ：2464952636&lt;br&gt;邮箱：[mailto:kukemc@qq.com kukemc@qq.com] || 群组服及子服所有事务、财务&lt;br&gt;官网及相关api开发维护&lt;br&gt;本服原创插件开发维护&lt;br&gt;群组端及子服服务器维护<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/admin/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AE%A1%E7%90%86%E7%BB%84/02.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (1).png&lt;/span&gt;&lt;/div&gt;''' 0ctber''' || 玩家管理 || QQ：3451085595&lt;br&gt;邮箱：[mailto:kkmc@0ctber.cn kkmc@0ctber.cn] || 群组及全部子服所有事务（除避暑山庄）&lt;br&gt;网站及数据库服务器开发维护&lt;br&gt;群组端及子服服务器维护<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/admin/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AE%A1%E7%90%86%E7%BB%84/03.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (5).png&lt;/span&gt;&lt;/div&gt;''' Tusk_Y''' || 子服管理 || QQ：3201680742 || 职业战争服所有事务<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/admin/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AE%A1%E7%90%86%E7%BB%84/04.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (7).png&lt;/span&gt;&lt;/div&gt; '''sipc_ink''' || 物理服主 || QQ：502415953 || 群组端及子服服务器维护<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/admin/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AE%A1%E7%90%86%E7%BB%84/05.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (6).png&lt;/span&gt;&lt;/div&gt; '''Gao_xiaohai''' || 子服服主&lt;br&gt;子服管理 || QQ：3137748929 || 搭路练习、无尽贪婪服所有事务、维护<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/admin/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AE%A1%E7%90%86%E7%BB%84/06.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent.png&lt;/span&gt;&lt;/div&gt;''' Bad_Nuts''' || 子服管理 || QQ：2357725356 || 起床战争事务<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/admin/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AE%A1%E7%90%86%E7%BB%84/07.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (4).png&lt;/span&gt;&lt;/div&gt; '''Zhinian_Yu''' || 子服管理 || QQ：1249168839 || 原版生存事务<br /> |}<br /> <br /> == 二、职位表相关释义 ==<br /> <br /> 游戏 id 一列中，表格颜色的不同代表其活跃度的不同，红色＞黄色＞绿色，各位玩家在反馈问题时，若有多个负责该事务的管理员时，推荐优先向活跃度高的管理员反馈。反馈问题时，每位管理员的权限各不相同，请仔细翻阅每个管理员的管理范围。一个管理员可能有多个联系方式，在本表中越靠上的联系方式活跃度越高。<br /> <br /> [[Category:服务器管理]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/%E8%B4%A6%E5%8F%B7%E7%9A%84%E6%B3%A8%E5%86%8C%E4%B8%8E%E7%99%BB%E5%BD%95&diff=212 2026-08-20T11:04:42Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>KukeMC 于 2026 年 3 月改变了账号体系，所带来的全新登录方式与常规国际版服务器大有不同，本篇文章将完整说明从注册到登录服务器的全流程。<br /> <br /> 首先打开浏览器（推荐电脑，手机端 ui 适配不佳）在地址栏中输入 [https://kuke.ink kuke.ink] 访问服务器官网，并在上方导航栏最右侧找到“登录”按钮进入登录页面，点击注册后在下方输入框填写您的相关信息（⚠️需要注意的是，您在官网注册的 Minecraft ID 就是您稍微在服务器里的账号 id，请注意填写），完成人机验证后点击创建账号进入下一步。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/faq/%E8%B4%A6%E5%8F%B7%E7%9A%84%E6%B3%A8%E5%86%8C%E4%B8%8E%E7%99%BB%E5%BD%95/01.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> 接下来按照操作，加入官方 QQ 群 940335608 ，待审核通过进入群聊后，直接在群内将复制下来的指令发送即可，群内机器人输出返回信息为“绑定成功”时可返回网页继续操作（如提示验证码已过期可刷新页面重新获取），在注册成功的窗口中，你可以看到你的免密登录通道 ip（完整复制下来，待会要用。然后请忽略下边的标准登录通道，神秘酷可写的屎山代码，实际上）。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/faq/%E8%B4%A6%E5%8F%B7%E7%9A%84%E6%B3%A8%E5%86%8C%E4%B8%8E%E7%99%BB%E5%BD%95/02.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/faq/%E8%B4%A6%E5%8F%B7%E7%9A%84%E6%B3%A8%E5%86%8C%E4%B8%8E%E7%99%BB%E5%BD%95/03.png&lt;/div&gt;<br /> <br /> 然后，打开我们的 minecraft 启动器（如 pcl2、hmcl、bakaxl 等），确认你的离线或正版 id 和你注册时填写一致后，进入游戏给刚刚复制专属 ip 地址填进去，然后你就可以愉快游玩服务器了，是不是非常简单。<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/faq/%E8%B4%A6%E5%8F%B7%E7%9A%84%E6%B3%A8%E5%86%8C%E4%B8%8E%E7%99%BB%E5%BD%95/04.png&lt;span class=&quot;kw-figcaption&quot;&gt;image.png&lt;/span&gt;&lt;/div&gt;<br /> <br /> [[Category:常见问题]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98&diff=211 2026-08-20T11:04:41Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>== 观前须知 ==<br /> <br /> 在本服务器的过程中，遇到任何问题都可在[https://qm.qq.com/q/GLZnakrlaq 官方QQ群]中进行提问，但提问前和提问时需要注意以下几点：<br /> <br /> * 您反馈的问题中是否在本文档中提到过。<br /> * 若有能力，请先确定问题引发的原因是否出自自身设备、网络或者程序问题。<br /> * 反馈问题时，请找对相关负责人或反馈通道，不是随便挑一个管理就一定能解决您的问题。<br /> <br /> == 常见问题解答 ==<br /> <br /> &lt;div class=&quot;mw-collapsible mw-collapsed kw-faq&quot;&gt;<br /> &lt;div class=&quot;kw-faq__q&quot;&gt;Q1 . 为什么我无法进入服务器，提示“服务器发送了一个无效的数据包”？&lt;/div&gt;<br /> &lt;div class=&quot;mw-collapsible-content&quot;&gt;<br /> A1 : 检查是否有安装 Syncmatica (共享原理图) 模组并删除后重试，如果你使用的是 XPlus 整合包那么通常会自带此模组，此模组需要服务器支持 否则就会导致无法进入服务器。<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mw-collapsible mw-collapsed kw-faq&quot;&gt;<br /> &lt;div class=&quot;kw-faq__q&quot;&gt;Q2 . 为什么我在群组服大厅对着机械动力或无尽贪婪的 npc 狂点却始终进不去服务器？&lt;/div&gt;<br /> &lt;div class=&quot;mw-collapsible-content&quot;&gt;<br /> A2 : 因为这两个模组服因为服务端的限制，暂不支持通过群组服大厅进入，且进入此类服务器都需要下载对应的客户端，<br /> <br /> 下载地址可以在官群下载对应服务器的客户端。<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mw-collapsible mw-collapsed kw-faq&quot;&gt;<br /> &lt;div class=&quot;kw-faq__q&quot;&gt;Q3 . 为什么我进到登录大厅的时候，点击 npc 没有跳转到群组大厅？&lt;/div&gt;<br /> &lt;div class=&quot;mw-collapsible-content&quot;&gt;<br /> A3 : 遇到这种情况可以退出到服务器列表页面后再次进入服务器即可解决。<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mw-collapsible mw-collapsed kw-faq&quot;&gt;<br /> &lt;div class=&quot;kw-faq__q&quot;&gt;Q4 . 为什么我在服务器公屏发消息消息延迟特别大？&lt;/div&gt;<br /> &lt;div class=&quot;mw-collapsible-content&quot;&gt;<br /> A4 : 如果服务器内能正常放置方块等行为，仅仅是公屏发消息延迟很大，可以前往[https://status.kuke.ink 服务器运行监控]，在数据库分类中找到KukeMC-玩家头衔数据库，如果运行异常，请在群内或本文档服务器管理组板块的职位表中，找到 0ctber 的联系方式，然后疯狂轰炸他。<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mw-collapsible mw-collapsed kw-faq&quot;&gt;<br /> &lt;div class=&quot;kw-faq__q&quot;&gt;Q5 . 为什么服务器开着，但是我正版账号进不去服务器？&lt;/div&gt;<br /> &lt;div class=&quot;mw-collapsible-content&quot;&gt;<br /> A5 : 还是前往[https://status.kuke.ink 服务器运行监控]，在数据库分类中找到KukeMC-账号正版信息数据库，如果运行异常，还是在群内或本文档服务器管理组板块的职位表中，找到 0ctber 的联系方式，然后疯狂轰炸他。<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mw-collapsible mw-collapsed kw-faq&quot;&gt;<br /> &lt;div class=&quot;kw-faq__q&quot;&gt;Q6 . 服务器内的延迟好高啊，我的手感！&lt;/div&gt;<br /> &lt;div class=&quot;mw-collapsible-content&quot;&gt;<br /> A6 : 可在本文档站首页，服务器连接信息中找到服务器的多个备用 ip 节点线路，尝试使用这备用 ip 连接服务器。<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mw-collapsible mw-collapsed kw-faq&quot;&gt;<br /> &lt;div class=&quot;kw-faq__q&quot;&gt;Q7 . 在主城进入到了家园世界，或是卡进主城彩蛋玩法后室地图，怎么回到大厅&lt;/div&gt;<br /> &lt;div class=&quot;mw-collapsible-content&quot;&gt;<br /> A7 : 轻轻按下左 shift+f，即可解脱，或打开物品栏中的游戏菜单 选择最上方的大厅图标，当然在后室地图死掉也是可以的，就是有点痛。<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mw-collapsible mw-collapsed kw-faq&quot;&gt;<br /> &lt;div class=&quot;kw-faq__q&quot;&gt;Q8 . 进入服务器提示“未知的主机”是怎么回事？我输入的地址没问题&lt;/div&gt;<br /> &lt;div class=&quot;mw-collapsible-content&quot;&gt;<br /> A8 : 很可能是DNS污染导致的，尝试按照此方法修改DNS为223.5.5.5和223.6.6.6（仅限于Windows且不保证100%解决<br /> <br /> 第一步可以使用win+R快捷键，输入ncpa.cpl替代<br /> <br /> 在第二步中，请根据实际情况选择，如果您使用网线连接，那么应该选择以太网，如果是WIFI，选择WLAN，同时查看下方WiFi名是否正确<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/faq/%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/01.png&lt;span class=&quot;kw-figcaption&quot;&gt;4721105e3f530c8e2ccf7fded0e32341.png&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> ----<br /> &lt;div class=&quot;mw-collapsible mw-collapsed kw-faq&quot;&gt;<br /> &lt;div class=&quot;kw-faq__q&quot;&gt;Q9 . 服务器内皮肤加载不出来，所有皮肤都不显示？&lt;/div&gt;<br /> &lt;div class=&quot;mw-collapsible-content&quot;&gt;<br /> A9 : 大概率同样也是DNS的问题，请尝试更换DNS后重新进入服务器，推荐修改DNS为223.5.5.5和223.6.6.6（阿里云的DNS 稳定速度快）<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> [[Category:常见问题]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E5%8E%86%E5%8F%B2%E8%B5%84%E6%96%99%E5%B1%95%E8%A7%88%E9%A6%86/%E9%85%B7%E5%8F%AF%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0&diff=210 2026-08-20T11:04:40Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>&lt;div class=&quot;kw-notice&quot;&gt;<br /> '''注：原文材料来自'''[https://www.bilibili.com/opus/985986635630903316 酷可mc的动态 - 哔哩哔哩]'''，原文编者：kukemc，材料提供者：kukemc。'''<br /> &lt;/div&gt;<br /> <br /> 最近有很多人问我关于我的服务器事情&lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E9%85%B7%E5%8F%AF%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/01.png&lt;/div&gt;<br /> <br /> KukeMC是一个多元化的我的世界Java版离线正版都支持的服务器<br /> <br /> 有纯原创的粘液空岛，以及拥有整整100+职业的职业战争<br /> <br /> 还有我们的白名单制原版生电服务器&lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E9%85%B7%E5%8F%AF%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/02.png&lt;/div&gt;<br /> <br /> 并且服务器游玩玩家数超过 1000+人！&lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E9%85%B7%E5%8F%AF%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/03.png&lt;/div&gt;<br /> <br /> 服务器内容还远远不止这些！光大厅就有30种不同的小游戏可以进行游玩~<br /> <br /> 更多玩法还有 起床战争、后室、密室杀手、等等多款创意的游戏<br /> <br /> '''| 想要一起游玩：'''<br /> <br /> 服务器官方群聊: 940335608<br /> <br /> ( 想要加入原版生电切记要加群进行审核！)<br /> <br /> 服务器IP：mc.kuke.ink<br /> <br /> 服务器官网：kuke.ink 欢迎各位加入服务器一起游玩！&lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E9%85%B7%E5%8F%AF%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/04.png&lt;/div&gt;&lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E9%85%B7%E5%8F%AF%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/05.png&lt;/div&gt;<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E9%85%B7%E5%8F%AF%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/06.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;f46bd4b8e93a76b554e2083c34c3909494782782.jpg&lt;/span&gt;&lt;/div&gt;<br /> <br /> [[Category:历史资料]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E5%8E%86%E5%8F%B2%E8%B5%84%E6%96%99%E5%B1%95%E8%A7%88%E9%A6%86/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0&diff=209 2026-08-20T11:04:40Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>&lt;div class=&quot;kw-notice&quot;&gt;<br /> '''注：原文材料来自'''[https://www.bilibili.com/opus/830997981905813508 我去，KukeMC! - 哔哩哔哩]'''，原文编者：0ctber，材料提供者：0ctber。'''<br /> &lt;/div&gt;<br /> <br /> == KukeMC服务器欢迎您的到来！ ==<br /> <br /> === 服务器基础信息： ===<br /> <br /> '''服务器名称：'''KukeMC<br /> <br /> '''服务器版本：'''1.20<br /> <br /> '''服务器性质：'''公益服务器<br /> <br /> '''服务器常活跃人数：'''5人<br /> <br /> '''服务器审核制度：'''无需白名单，无正版验证<br /> <br /> '''服务器配置：'''cpu：E5-2403 | 内存：8g DDR 2 | 硬盘：480g SSD*2<br /> <br /> '''腐竹：'''酷可mc | '''物理腐竹：'''sipc<br /> <br /> '''服务器官网&amp;官方Q群'''：mc.kuke.ink | 719281301<br /> <br /> '''服务器内子服务器：'''KukeMC粘液服，KukeMC生电服，Kuke机械动力mod服<br /> <br /> ----<br /> <br /> === KukeMC粘液服： ===<br /> <br /> 作为正在开启的服内资历最老，玩家最多的子服务器，服务器进度完善，拥有了许多机器<br /> <br /> 传统生电与粘液科技插件互相结合，搭配技能树、经济系统、丰富附属等<br /> <br /> 使用粘液科技的奇妙力量，参与刺激的战斗，利用技能树更好辅助生存进度！<br /> <br /> 您也可以选择在服中利用粘液来辅助自己建造生电设备<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/01.webp&lt;span class=&quot;kw-figcaption&quot;&gt;服务器主城取景&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/02.webp&lt;span class=&quot;kw-figcaption&quot;&gt;刷铁机---执念鱼，0ctber建造&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/03.webp&lt;span class=&quot;kw-figcaption&quot;&gt;小黑塔-执念鱼建造&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/04.webp&lt;span class=&quot;kw-figcaption&quot;&gt;史莱姆农场-0ctber建造&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/05.webp&lt;span class=&quot;kw-figcaption&quot;&gt;村名交易站-0ctber建造&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/06.webp&lt;span class=&quot;kw-figcaption&quot;&gt;服内成员的家-mistlakeCirno&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/07.webp&lt;span class=&quot;kw-figcaption&quot;&gt;服内成员的家-Comefro&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/08.webp&lt;span class=&quot;kw-figcaption&quot;&gt;服内成员的家-0ctber&lt;/span&gt;&lt;/div&gt;<br /> ----<br /> <br /> === KukeMC生电服： ===<br /> <br /> 本服正在开荒期，机器尚未完善，人员较少，但是希望以后服务器会变得更好！<br /> <br /> 您可以感受到原版游戏的精华，探索新的机器，创造美好的建筑，与玩家建立社区，创造自己的故事<br /> <br /> 服务器内有地毯端及其附属和挖掘榜，有效提升生电效率和动力！<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/09.webp&lt;span class=&quot;kw-figcaption&quot;&gt;末地平整工程-0ctber&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E7%9A%84%E5%AE%A3%E4%BC%A0%E6%96%87%E7%AB%A0/10.webp&lt;span class=&quot;kw-figcaption&quot;&gt;末地刷石机-0ctber&lt;/span&gt;&lt;/div&gt;<br /> ----<br /> <br /> === KukeMC机械动力服： ===<br /> <br /> 作为一个三天前新开的服务器，服务器热度在服内居高不下，真希望看到以后的优秀发展！<br /> <br /> 对于喜欢多模组玩法的玩家，那我们的机械动力星际服务器将让你拥有更好的游戏体验，体验到机械力量的运作，创建复杂的机械系统，进入宇宙的浩瀚星际，探索未知的星球，建立属于自己的星际帝国！<br /> <br /> ----<br /> <br /> 我们的团队致力于提供稳定，良好和公益的游戏环境，让每一位玩家都能畅享游戏的乐趣，无论你的年龄，无论你的技术，KukeMC欢迎你的到来！<br /> <br /> [[Category:历史资料]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E5%8E%86%E5%8F%B2%E8%B5%84%E6%96%99%E5%B1%95%E8%A7%88%E9%A6%86/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E5%85%B3%E4%BA%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E5%85%AC%E5%91%8A&diff=208 2026-08-20T11:04:39Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>&lt;div class=&quot;kw-notice&quot;&gt;<br /> '''注：原文材料来自'''[https://www.bilibili.com/opus/838471942253051906 KukeMC服务器更新公告 23.9.7 - 哔哩哔哩]'''，原文编者：0ctber，材料提供者：0ctber。'''<br /> &lt;/div&gt;<br /> <br /> == 规则方面更新： ==<br /> <br /> # 正在进行生电服作弊/破坏游戏环境处罚条例内容编辑<br /> # 生电服地毯端 /player 权限，为防止滥用、获取玩家背包道具等，不再开放全体玩家。玩家需向指令权限拥有者申请召唤配置。如理由明确且长期使用可申请指令权限<br /> <br /> == 内容方面更新： ==<br /> <br /> 1.基于 PCL II 改的KukeMC启动器正式上线~，可在官方Q群、频道等对应地方下载<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E5%85%B3%E4%BA%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E5%85%AC%E5%91%8A/01.webp&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E5%85%B3%E4%BA%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E5%85%AC%E5%91%8A/02.webp&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%BE%AA%E5%9C%A8B%E7%AB%99%E4%B8%93%E6%A0%8F%E5%85%B3%E4%BA%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E5%85%AC%E5%91%8A/03.webp&lt;/div&gt;<br /> ----<br /> <br /> 本人并非KukeMC服务器管理员，仅对于服务器提出建设意见，再此说明<br /> <br /> [[Category:历史资料]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E5%8E%86%E5%8F%B2%E8%B5%84%E6%96%99%E5%B1%95%E8%A7%88%E9%A6%86/%E5%9B%9B%E6%9C%8D_%E8%80%81%E7%B2%98%E6%B6%B2%E7%A7%91%E6%8A%80%E6%9C%8D/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88&diff=207 2026-08-20T11:04:38Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>&lt;div class=&quot;kw-notice&quot;&gt;<br /> '''老粘液服仅存的资料真的特别少，编者能搜集到的资料类型只有图片，而且也不多。各位老玩家们如果手上有当时譬如文字资料，图片资料等都可以贡献出来。'''<br /> &lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88/01.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;Zhinian_Yu 与 0ctber 建造的刷铁机&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88/02.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;主城风景&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88/03.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;主城风景&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88/04.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;主城风景-最经典的一张&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88/05.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;Zhinian_Yu 建造的小黑塔&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88/06.png&lt;span class=&quot;kw-figcaption&quot;&gt;Zhinian_Yu 建造的小黑塔&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88/07.png&lt;span class=&quot;kw-figcaption&quot;&gt;0ctber 建造的史莱姆农场&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88/08.png&lt;span class=&quot;kw-figcaption&quot;&gt;0ctber 建造的奸商交易所&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88/09.png&lt;span class=&quot;kw-figcaption&quot;&gt;服内成员的家-mistlakeCirno&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88/10.png&lt;span class=&quot;kw-figcaption&quot;&gt;服内成员的家-Comefro&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E5%9B%BE%E7%89%87%E5%B1%95%E8%A7%88/11.png&lt;span class=&quot;kw-figcaption&quot;&gt;服内成员的家-0ctber&lt;/span&gt;&lt;/div&gt;<br /> <br /> [[Category:历史资料]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E5%8E%86%E5%8F%B2%E8%B5%84%E6%96%99%E5%B1%95%E8%A7%88%E9%A6%86/%E4%BA%94%E6%9C%8D_KukeMC_Turbo%2B/%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E6%96%BD%E7%BB%9F%E8%AE%A1%E8%A1%A8&diff=206 2026-08-20T11:04:37Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>&lt;div class=&quot;kw-notice&quot;&gt;<br /> '''注：原文材料来自'''[https://kukemc-server.feishu.cn/wiki/YZ10wXexwibeGakYfapcrPsMnxb?from=from_copylink 飞书文档 | KUKE:Turbo+生存服地标一览]'''，原文编者：0ctber，材料提供者：0ctber。'''<br /> &lt;/div&gt;<br /> <br /> == ——阅前必看—— ==<br /> <br /> === 文档数据 ===<br /> <br /> 数据内容截止到 | 2024年1月24日12:00点<br /> <br /> 地标个数 | 总011个 建筑 3 |设备 8<br /> <br /> 共计建设者 | 005个<br /> <br /> ----<br /> <br /> === 文档介绍 ===<br /> <br /> 本文档仅收集展示KUKE:Turbo+模组服内的所有玩家建设的 机器/建筑 的各类信息，包括 观看/使用 规则、地标信息、建设者信息、建设时间、建设地点等各项内容。<br /> <br /> 各位成员们在找到想要找的 机器/建筑 时，严格遵守该栏列出的所有规则，严禁在明确禁止的情况下做出违规行为，违者将会上报管理员做出惩罚。<br /> <br /> ----<br /> <br /> === 文档内各项词条注释 ===<br /> <br /> 授权者 | 除op外，在某个地标内被建设者或管理者授权使用某项或全部功能的人员<br /> <br /> 自由使用 | 当地标标注为自由使用时，玩家可自行前往此地标，根据 规则/使用方法 一栏内容进行操作<br /> <br /> 限制使用 | 当地标标注为限制使用时，使用该类设备需提前通知建设者或管理者，授权者除外<br /> <br /> 严禁使用 | 当地标标注为严禁使用时，此类设备仅供参观，授权者除外<br /> <br /> == ——原版生电机器类型地标—— ==<br /> <br /> === 主世界 ===<br /> <br /> ==== 1. 史莱姆农场 | 自由使用 ====<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E6%96%BD%E7%BB%9F%E8%AE%A1%E8%A1%A8/01.png&lt;/div&gt;<br /> <br /> '''建设者：'''0ctber | '''管理者：'''0ctber<br /> <br /> '''管理者联系：'''QQ 3451085595（0ctber）<br /> <br /> '''坐标：'''1105 60 1300<br /> <br /> '''地狱高速状态：'''未接入<br /> <br /> '''使用规则：'''<br /> <br /> 1，如箱子内史莱姆数量低于所需量，可到上方半砖平台处，沿脚手架至挂机bot放置点，待挂机结束后，必须将bot杀死避免爆箱卡服<br /> <br /> 2，禁止擅自破坏任何方块<br /> <br /> 3，如箱子内物资见底时，可找管理者即时挂机补充<br /> <br /> 4，如无bot权限，可自行登到挂机点挂机，或等待管理者辅助<br /> <br /> 5，从中心出发的4*4区块，不得挖掘或建造<br /> <br /> ----<br /> <br /> ==== 2. 僵尸猪人塔 | 限制使用 ====<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E6%96%BD%E7%BB%9F%E8%AE%A1%E8%A1%A8/02.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E6%96%BD%E7%BB%9F%E8%AE%A1%E8%A1%A8/03.png&lt;/div&gt;<br /> <br /> '''建设者：'''0ctber | '''管理者：'''0ctber<br /> <br /> '''管理者联系：'''QQ 3451085595（0ctber）<br /> <br /> '''授权：'''player召唤权限者<br /> <br /> '''坐标：'''3300 64 1420（主世界刷怪点）<br /> <br /> '''地狱高速状态：'''未接入<br /> <br /> '''使用规则：'''<br /> <br /> 1，未经管理者允许，不得擅自使用猪人塔。<br /> <br /> 2，箱子内的道具可自由拿取，严重不足时即时向管理者联系<br /> <br /> 3，授权者可通过在地狱挂机点放置bot，主世界对准挂机点盔甲架12tick的间隔攻击<br /> <br /> 4，距离中点2*2区块内不得擅自破坏或建造<br /> <br /> ----<br /> <br /> ==== 3. 刷沙机&amp;末地传送门| 严禁使用 ====<br /> <br /> '''建设者：'''0ctber | '''管理者：'''0ctber<br /> <br /> '''管理者联系：'''QQ 3451085595（0ctber）<br /> <br /> '''坐标：'''90 -4 -2100（主世界刷沙点&amp;末地传送门）<br /> <br /> '''地狱高速状态：'''未接入<br /> <br /> '''使用规则：'''<br /> <br /> 1，末地门可自由进入<br /> <br /> 2，严禁触碰任何开关，严禁破坏任何红石线路，严禁未告知管理者便开启刷沙机<br /> <br /> 3，距离中点2*2区块内不得擅自破坏或建造<br /> <br /> === 地狱 ===<br /> <br /> ==== 1. 下界疣猪塔 | 自由使用 ====<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E6%96%BD%E7%BB%9F%E8%AE%A1%E8%A1%A8/04.png&lt;/div&gt;<br /> <br /> '''建设者：'''0ctber | '''管理者：'''0ctber<br /> <br /> '''管理者联系：'''QQ 3451085595（0ctber）<br /> <br /> '''坐标：'''205 139 -720<br /> <br /> '''地狱高速状态：'''接入<br /> <br /> '''使用规则：'''<br /> <br /> 1，箱子内含有皮革和猪肉，自行拿取<br /> <br /> 2，物资不足时可通过脚手架攀爬到挂机点放置bot或自行在上边挂机<br /> <br /> 3，物资不足时可联系管理者<br /> <br /> 4，距离中点2*2区块内不得擅自破坏或建造<br /> <br /> ----<br /> <br /> ==== 2. 猪灵交易所 | 自由使用 ====<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E6%96%BD%E7%BB%9F%E8%AE%A1%E8%A1%A8/05.png&lt;/div&gt;<br /> <br /> '''建设者：'''0ctber | '''管理者：'''0ctber<br /> <br /> '''管理者联系：'''QQ 3451085595（0ctber）<br /> <br /> '''坐标：'''70 164 50（0ctber家地狱高速右侧）<br /> <br /> '''地狱高速状态：'''未接入<br /> <br /> '''使用规则：'''<br /> <br /> 1，猪灵已经全部补充完毕，无需再次挂机补充<br /> <br /> 2，物资在箱子中，根据分类自行拿取<br /> <br /> 3，物资不足时可前往二楼在箱子中放置金锭进行交易兑换，金锭的获取途径请前往猪人塔，严禁在箱子中放置杂物<br /> <br /> 4，距离中点2*2区块内不得擅自破坏或建造<br /> <br /> ----<br /> <br /> === 末地 ===<br /> <br /> ==== 1. 刷石机 | 限制使用 ====<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E6%96%BD%E7%BB%9F%E8%AE%A1%E8%A1%A8/06.png&lt;/div&gt;<br /> <br /> '''建设者：'''0ctber | '''管理者：'''0ctber<br /> <br /> '''管理者联系：'''QQ 3451085595（0ctber）<br /> <br /> '''坐标：'''\-5 52 57<br /> <br /> '''使用规则：'''<br /> <br /> 1，未经管理者允许，不得擅自开启刷石机。<br /> <br /> 2，如联系管理者开启刷石机，在之后不使用走之前，必须关闭机器，否则会导致机器炸膛<br /> <br /> 3，挂机时物资爆箱请立刻关闭机器，未做物品溢出处理<br /> <br /> 4，物资不足时可联系管理者<br /> <br /> 5，距离中点2*2区块内不得擅自破坏或建造<br /> <br /> ----<br /> <br /> ==== 2.自补货高速熔炉 | 自由使用 ====<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E6%96%BD%E7%BB%9F%E8%AE%A1%E8%A1%A8/07.png&lt;/div&gt;<br /> <br /> '''建设者：'''0ctber | '''管理者：'''0ctber<br /> <br /> '''管理者联系：'''QQ 3451085595（0ctber）<br /> <br /> '''坐标：'''30 57 50<br /> <br /> '''使用规则：'''<br /> <br /> 1，直接在箱子处放置需要烧炼的道具即可，在楼下的箱子中拿取烧制完毕的道具<br /> <br /> 2，使用前确认拉杆拉下，使用后确认拉杆拉上<br /> <br /> 3，必须在箱子中放置可烧制的物品，如出现物品无法烧制的情况，请手动取出<br /> <br /> 4，想要获得熔炉烧制的经验，可踩上压力板，就可让压力板前的漏斗停止工作，手动取出熔炉内道具即可<br /> <br /> 5，距离中点2*2区块内不得擅自破坏或建造<br /> <br /> ----<br /> <br /> ==== 3. 小黑经验塔 | 自由使用 ====<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E6%96%BD%E7%BB%9F%E8%AE%A1%E8%A1%A8/08.png&lt;/div&gt;<br /> <br /> '''建设者：'''0ctber | '''管理者：'''0ctber<br /> <br /> '''管理者联系：'''QQ 3451085595（0ctber）<br /> <br /> '''坐标：'''380 57 -10<br /> <br /> '''使用规则：'''<br /> <br /> 1，到达塔底后，如无小黑，稍许等待小黑掉落即可<br /> <br /> 2，建议使用剑为攻击工具，木剑也行，小黑血量已控制在一血<br /> <br /> 3，距离中点2*2区块内不得擅自破坏或建造<br /> <br /> ----<br /> <br /> ==== 4. 刷沙机收集点 | 严禁使用 ====<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/history/%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E6%96%BD%E7%BB%9F%E8%AE%A1%E8%A1%A8/09.png&lt;/div&gt;<br /> <br /> '''建设者：'''0ctber、Zhinian_Yu（挖掘）、dyc114514（挖掘） | '''管理者：'''0ctber<br /> <br /> '''管理者联系：'''QQ 3451085595（0ctber）<br /> <br /> '''坐标：'''100 49 0<br /> <br /> '''使用规则：'''<br /> <br /> 1，禁止触碰任何拉杆及红石原件<br /> <br /> 2，禁止堵住或破坏刷沙机<br /> <br /> 3，在出生点楼下箱子中自行拿取需要的方块<br /> <br /> ----<br /> <br /> == ——模组生产机器类型地标—— ==<br /> <br /> === 主世界 ===<br /> <br /> ==== %. 建设中(*❦ω❦).exe ====<br /> <br /> === 地狱 ===<br /> <br /> ==== %. 建设中(*❦ω❦).exe ====<br /> <br /> === 末地 ===<br /> <br /> ==== %. 建设中(*❦ω❦).exe ====<br /> <br /> ----<br /> <br /> == ——建筑类型地标—— ==<br /> <br /> === 主世界 ===<br /> <br /> ==== %. 建设中(*❦ω❦).exe ====<br /> <br /> === 地狱 ===<br /> <br /> ==== 1. 地狱冰高速 ====<br /> <br /> '''建设者：'''0ctber、kukew | '''维护者：'''0ctber<br /> <br /> '''坐标：'''\-58 129 140 起点 ——&gt; -10 129 -850 终点<br /> <br /> '''建筑介绍：'''<br /> <br /> 1，主干道（0ctber家到酷可家），支干道（执念鱼家，疣猪塔）<br /> <br /> '''使用规则：'''<br /> <br /> 1，直接在冰面上划船前往想去的地方就好了<br /> <br /> === 末地 ===<br /> <br /> ==== 1. 末地平整工程 ====<br /> <br /> '''建设者'''：0ctber、Zhinian_Yu、Bad_Nuts、kukew（贡献不分先后，每个人都是最大贡献者(￣▽￣)~*）<br /> <br /> '''地点：'''末地主岛<br /> <br /> '''建筑介绍：'''<br /> <br /> 1，本质上不算是建筑，但是这项全服性工程的意义非凡，至少挖掉了末地10层呢(''^▽^'')<br /> <br /> 2，为后期末地的各项建筑和机器预留了空间<br /> <br /> [[Category:历史资料]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E5%85%B3%E4%BA%8E%E6%9C%AC%E6%96%87%E6%A1%A3/%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E7%BB%84&diff=205 2026-08-20T11:04:36Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>== 关于编辑组 ==<br /> <br /> 编辑组与管理组为服务器建设承担不同的事务，编辑组负责的内容包括：服务器日常的统计整理、各子服的游玩指南与介绍的编辑、各子服资料库的统计整理、文档的排版与校对。<br /> <br /> 编辑组内的成员收到管理组与玩家的监督，由管理组直接对编辑组内成员进行处理。作为服务器的主要建设者，编辑组成员除了完成日常安排外，需要对自身在服内的行为规范做出严格控制。<br /> <br /> == 编辑组的组织架构 ==<br /> <br /> 参与文档编制的成员包括官方编辑组成员和玩家编辑组成员。<br /> <br /> 官方编辑组成员多数为服务器管理组成员，成员在文档内具有更高的编辑权限，且需对自己子服板块内容负责。官方管理组成员有权对玩家编辑组成员进行管理。<br /> <br /> 玩家编辑组成员一般为服务器内玩家自愿申请或官方编辑组邀请，仅可编辑子服板块中，其负责的对应子服内容。<br /> <br /> === 官方编辑组成员职位表（更新日期2025年6月28日） ===<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! '''游戏id''' !! '''职务''' !! '''负责范围'''<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/meta/%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E7%BB%84/01.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (3).png&lt;/span&gt;&lt;/div&gt;''' kukemc''' || 管理员&amp;责任编辑 || 全域审阅、剪辑<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/meta/%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E7%BB%84/02.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (1).png&lt;/span&gt;&lt;/div&gt;''' 0ctber''' || 管理员&amp;责任编辑 || 全域审阅、编辑；数据整理<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/meta/%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E7%BB%84/03.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (2).png&lt;/span&gt;&lt;/div&gt;''' htewe''' || 全域编辑员 || 避暑山庄板块（腾讯文档）<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/meta/%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E7%BB%84/04.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (5).png&lt;/span&gt;&lt;/div&gt;''' Tusk_Y''' || 全域编辑员 || 职业战争板块<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/meta/%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E7%BB%84/05.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (4).png&lt;/span&gt;&lt;/div&gt;''' Zhinian_yu''' || 全域编辑员 || 原版生存板块<br /> |-<br /> | &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/meta/%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E7%BB%84/06.png&lt;span class=&quot;kw-figcaption&quot;&gt;Avatar_Transparent (9).png&lt;/span&gt;&lt;/div&gt;''' Zurnm''' || 全域编辑助理 || 全域审阅、排版；数据整理<br /> |}<br /> <br /> == 职位表相关释义 ==<br /> <br /> 在游戏id一列中，用户头像选自其服务器内角色皮肤或其QQ群内的账号头像。游戏id选自用户在服务器内常用游戏账号id，若该位用户尚未在服务器内注册过信息则选取其QQ内的账号名称。<br /> <br /> 在职务一列中，若一个用户在编辑组内担任多个职务，将按照所担任的职务等级从高到低顺次排序。<br /> <br /> [[Category:关于本文档]]</div>

Kuke https://wiki.kuke.ink/index.php?title=%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC&diff=204 2026-08-20T11:04:35Z

<p>Kuke：​图片迁移至语义化对象存储路径</p> <hr /> <div>== 一、关于我们 ==<br /> <br /> KukeMC创建于2023年，是一个包含职业战争、趣味生存、监狱风云、粘液空岛、起床战争等多种玩法的我的世界群组服。<br /> <br /> 自服务器创建以来，我们努力创建一个环境良好更公平公正的游戏氛围。在玩家合理建议的基础上，积极对于服务器各项内容或玩法做出调整修改，大力推动服务器玩家社区的建设和维护。<br /> <br /> [https://kuke.ink 【官方网站】KukeMC-我的世界服务器(Minecraft)]<br /> <br /> == 二、服务器连接信息（更新日期2026年6月5日） ==<br /> <br /> &lt;div class=&quot;kw-notice&quot;&gt;<br /> 服务器仅支持国际Java版和国际基岩版进入，暂不支持网易基岩版、网易Java版等。<br /> 本板块中提到的支持或推荐的客户端版本仅包含群组服大厅及其插件服与原版服，模组服需要指定客户端，具体请参考本文档子服介绍部分。<br /> &lt;/div&gt;<br /> <br /> 服务器ip： 请前往 [https://kuke.ink KukeMC群组服官网] 注册后获取专属 ip 地址。<br /> <br /> 支持客户端游戏版本：1.7.2~1.21.11（请使用正式版而非快照版，部分子服需要指定版本，具体请参考本文档子服介绍部分）<br /> <br /> == 三、服务器风景一览 ==<br /> <br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/01.png&lt;span class=&quot;kw-figcaption&quot;&gt;群组服主城-白天&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/02.png&lt;span class=&quot;kw-figcaption&quot;&gt;群组服主城-夜晚&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/03.png&lt;span class=&quot;kw-figcaption&quot;&gt;2025新年合照&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/04.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;2024职业战争活动合照&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/05.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;老粘液服主大厅挂机池（已关服）&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/06.png&lt;span class=&quot;kw-figcaption&quot;&gt;老粘液服刷铁机（已关服）&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/07.png&lt;span class=&quot;kw-figcaption&quot;&gt;老生电服服猪人塔地狱刷怪部分（已关服）&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/08.png&lt;span class=&quot;kw-figcaption&quot;&gt;老生电服刷沙机收集部分&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/09.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;玩家建筑01&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/10.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;玩家建筑02&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/11.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;粘液空岛服主大厅&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/12.jpeg&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/13.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;老粘液服主大厅风景01（已关服）&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/14.jpeg&lt;span class=&quot;kw-figcaption&quot;&gt;老粘液服主大厅风景02（已关服）&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/15.png&lt;span class=&quot;kw-figcaption&quot;&gt;老粘液服mistlakeCirno的家（已关服）&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/16.png&lt;span class=&quot;kw-figcaption&quot;&gt;老粘液服村民交易所（已关服）&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/17.jpeg&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/18.jpeg&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/19.jpeg&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/20.jpeg&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/21.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/22.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/23.png&lt;/div&gt;<br /> &lt;div class=&quot;kw-figure&quot;&gt;https://kuke-wiki.cn-nb1.rains3.com/wiki/about/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/24.png&lt;/div&gt;<br /> <br /> == 四、服务器在线工具 ==<br /> <br /> * [https://kuke.ink/bans 封禁列表 - KukeMC]<br /> * [https://kuke.ink/news 资讯中心 - KukeMC]<br /> * [https://kuke.ink/activity 动态广场 - KukeMC]<br /> <br /> * [https://status.kuke.ink/ 服务状态 - KukeMC群组服]<br /> * [https://kuke.ink/messages 留言板 - KukeMC]<br /> * [https://kuke.ink/players 在线玩家 - KukeMC]<br /> <br /> == 五、请支持我们 ==<br /> <br /> 如果您认为服务器值得推荐，可对服务器官方在各视频网站上发布的宣传片或服务器日常进行点赞评论，或是在各大论坛中发表服务器日常贴或点赞顶帖官方宣传贴、在社交平台上发布自己在服务器的日常等行为，都将是对我们的最大的支持！（可将自己对于上述行为或额外的宣传行为进行截图，告诉管理员，会对您进行一定的奖励以感谢您的支持）<br /> <br /> * [https://klpbbs.com/thread-151387-1-1.html [1.7-1.21]KukeMC群组服-新一代多元化Minecraft服务器！ | 职业战争 | 起床战争 | 生电 | 粘... - 服务器大厅 - Minecraft(我的世界)苦力怕论坛]<br /> * [https://space.bilibili.com/3546652948302452/ KukeMC B站官方视频号]<br /> * [https://www.mclists.cn/server/7682.html KukeMC_群组服务器_游戏视频_我的世界服务器列表_MineCraft服务器联机平台_MC服务器大全]<br /> * [https://www.minebbs.com/threads/1-6-1-21-kukemc-rpg.29497/ Java服 - 生存 - [1.6~1.21]KukeMC群组服 | 职业战争 | 起床战争 | 机械动力 | 生电 | 粘液空岛]<br /> * [https://play.mcmod.cn/sv20188360.html#google_vignette KukeMC群组服 - 找服玩|Minecraft服务器列表]<br /> <br /> [[Category:关于本文档]]</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=203 2026-08-20T10:44:57Z

<p>Kuke：​revert probe</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-nav__link--active,<br /> .kuke-nav__link--active:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> .kuke-nav__link--active::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> .kuke-nav__link--active:hover,<br /> .kuke-nav__link--active:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav,<br /> .citizen-header-position-right .kuke-nav {<br /> flex-direction: column;<br /> align-items: stretch;<br /> width: 100%;<br /> overflow-x: visible;<br /> }<br /> <br /> .citizen-header-position-left .kuke-nav__link--active::after,<br /> .citizen-header-position-right .kuke-nav__link--active::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=202 2026-08-20T10:44:53Z

<p>Kuke：​probe real</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-nav__link--active,<br /> .kuke-nav__link--active:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> .kuke-nav__link--active::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> .kuke-nav__link--active:hover,<br /> .kuke-nav__link--active:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav,<br /> .citizen-header-position-right .kuke-nav {<br /> flex-direction: column;<br /> align-items: stretch;<br /> width: 100%;<br /> overflow-x: visible;<br /> }<br /> <br /> .citizen-header-position-left .kuke-nav__link--active::after,<br /> .citizen-header-position-right .kuke-nav__link--active::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }<br /> .kuke-cache-probe-real{outline:1px solid red}</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=201 2026-08-20T10:44:27Z

<p>Kuke：​revert</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-nav__link--active,<br /> .kuke-nav__link--active:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> .kuke-nav__link--active::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> .kuke-nav__link--active:hover,<br /> .kuke-nav__link--active:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav,<br /> .citizen-header-position-right .kuke-nav {<br /> flex-direction: column;<br /> align-items: stretch;<br /> width: 100%;<br /> overflow-x: visible;<br /> }<br /> <br /> .citizen-header-position-left .kuke-nav__link--active::after,<br /> .citizen-header-position-right .kuke-nav__link--active::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=200 2026-08-20T10:44:16Z

<p>Kuke：​cache probe 3</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-nav__link--active,<br /> .kuke-nav__link--active:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> .kuke-nav__link--active::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> .kuke-nav__link--active:hover,<br /> .kuke-nav__link--active:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav,<br /> .citizen-header-position-right .kuke-nav {<br /> flex-direction: column;<br /> align-items: stretch;<br /> width: 100%;<br /> overflow-x: visible;<br /> }<br /> <br /> .citizen-header-position-left .kuke-nav__link--active::after,<br /> .citizen-header-position-right .kuke-nav__link--active::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }/* cache-probe-zzz */</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=199 2026-08-20T10:40:13Z

<p>Kuke：​revert</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-nav__link--active,<br /> .kuke-nav__link--active:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> .kuke-nav__link--active::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> .kuke-nav__link--active:hover,<br /> .kuke-nav__link--active:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav,<br /> .citizen-header-position-right .kuke-nav {<br /> flex-direction: column;<br /> align-items: stretch;<br /> width: 100%;<br /> overflow-x: visible;<br /> }<br /> <br /> .citizen-header-position-left .kuke-nav__link--active::after,<br /> .citizen-header-position-right .kuke-nav__link--active::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=198 2026-08-20T10:39:42Z

<p>Kuke：​cache probe 2</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-nav__link--active,<br /> .kuke-nav__link--active:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> .kuke-nav__link--active::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> .kuke-nav__link--active:hover,<br /> .kuke-nav__link--active:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav,<br /> .citizen-header-position-right .kuke-nav {<br /> flex-direction: column;<br /> align-items: stretch;<br /> width: 100%;<br /> overflow-x: visible;<br /> }<br /> <br /> .citizen-header-position-left .kuke-nav__link--active::after,<br /> .citizen-header-position-right .kuke-nav__link--active::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }/* cache-probe-xyz */</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=197 2026-08-20T10:39:17Z

<p>Kuke：​revert cache probe</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-nav__link--active,<br /> .kuke-nav__link--active:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> .kuke-nav__link--active::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> .kuke-nav__link--active:hover,<br /> .kuke-nav__link--active:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav,<br /> .citizen-header-position-right .kuke-nav {<br /> flex-direction: column;<br /> align-items: stretch;<br /> width: 100%;<br /> overflow-x: visible;<br /> }<br /> <br /> .citizen-header-position-left .kuke-nav__link--active::after,<br /> .citizen-header-position-right .kuke-nav__link--active::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }</div>

Kuke https://wiki.kuke.ink/index.php?title=MediaWiki:Citizen.css&diff=196 2026-08-20T10:39:14Z

<p>Kuke：​cache probe</p> <hr /> <div>/* ==========================================================================<br /> Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言<br /> 天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃<br /> ========================================================================== */<br /> <br /> /* --- 1. 字体 -------------------------------------------------------------- */<br /> <br /> :root {<br /> --font-family-base: Inter, system-ui, -apple-system, &quot;Segoe UI&quot;,<br /> &quot;Noto Sans SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;<br /> --font-family-heading: var( --font-family-base );<br /> --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,<br /> Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;<br /> }<br /> <br /> body {<br /> -webkit-font-smoothing: antialiased;<br /> -moz-osx-font-smoothing: grayscale;<br /> }<br /> <br /> /* --- 2. 配色令牌 ---------------------------------------------------------- */<br /> <br /> :root,<br /> .skin-theme-clientpref-day {<br /> /* Citizen 的主色管线（oklch + hsl 双写） -&gt; sky-600 #0284c7 */<br /> --color-progressive-oklch__l: 58%;<br /> --color-progressive-oklch__c: 0.135;<br /> --color-progressive-oklch__h: 236;<br /> --color-progressive-hsl__h: 201;<br /> --color-progressive-hsl__s: 96%;<br /> --color-progressive-hsl__l: 39%;<br /> <br /> /* slate 冷灰中性色 */<br /> --color-base: #0f172b;<br /> --color-emphasized: #020618;<br /> --color-subtle: #45556c;<br /> --color-subtle--hover: #0f172b;<br /> <br /> --color-surface-0: #f8fafc;<br /> --color-surface-1: #ffffff;<br /> --color-surface-2: #f1f5f9;<br /> --color-surface-3: #e2e8f0;<br /> --color-surface-4: #cbd5e1;<br /> <br /> --border-color-base: rgb( 226 232 240 / 0.6 );<br /> --border-color-subtle: rgb( 226 232 240 / 0.9 );<br /> --border-color-interactive: #cbd5e1;<br /> <br /> /* 私有令牌 */<br /> --kuke-brand: #0ea5e9;<br /> --kuke-brand-hover: #38bdf8;<br /> --kuke-brand-strong: #0284c7;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #e0f2fe;<br /> --kuke-card-bg: #ffffff;<br /> --kuke-card-border: rgb( 226 232 240 / 0.6 );<br /> --kuke-card-border-hover: rgb( 14 165 233 / 0.3 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.1 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );<br /> --kuke-glass: rgb( 255 255 255 / 0.94 );<br /> --kuke-glass-border: rgb( 226 232 240 / 0.5 );<br /> <br /> /* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */<br /> --opacity-glass: 0.96;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> --kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --kuke-overlay: linear-gradient(<br /> to top,<br /> rgb( 15 23 43 / 0.9 ),<br /> rgb( 15 23 43 / 0.2 ),<br /> transparent<br /> );<br /> --kuke-glow-a: rgb( 56 189 248 / 0.2 );<br /> --kuke-glow-b: rgb( 192 132 252 / 0.2 );<br /> --kuke-notice-bg: #f0f9ff;<br /> --kuke-warn: #f59e0b;<br /> --kuke-warn-bg: #fffbeb;<br /> }<br /> <br /> .skin-theme-clientpref-night,<br /> .skin-theme-clientpref-black {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> .skin-theme-clientpref-os {<br /> --color-progressive-oklch__l: 74%;<br /> --color-progressive-oklch__c: 0.13;<br /> --color-progressive-hsl__l: 60%;<br /> <br /> --color-base: #e2e8f0;<br /> --color-emphasized: #ffffff;<br /> --color-subtle: #90a1b9;<br /> --color-subtle--hover: #cbd5e1;<br /> <br /> --color-surface-0: #020618;<br /> --color-surface-1: #0f172b;<br /> --color-surface-2: #1d293d;<br /> --color-surface-3: #314158;<br /> --color-surface-4: #45556c;<br /> <br /> --border-color-base: rgb( 49 65 88 / 0.5 );<br /> --border-color-subtle: rgb( 49 65 88 / 0.8 );<br /> --border-color-interactive: #45556c;<br /> <br /> --kuke-brand: #38bdf8;<br /> --kuke-brand-hover: #7dd3fc;<br /> --kuke-brand-strong: #0ea5e9;<br /> --kuke-brand-light: #7dd3fc;<br /> --kuke-brand-pale: #075985;<br /> --kuke-card-bg: rgb( 29 41 61 / 0.5 );<br /> --kuke-card-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-card-border-hover: rgb( 56 189 248 / 0.35 );<br /> --kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),<br /> 0 4px 6px -4px rgb( 0 0 0 / 0.3 );<br /> --kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );<br /> --kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );<br /> --kuke-glass: rgb( 15 23 43 / 0.95 );<br /> --kuke-glass-border: rgb( 49 65 88 / 0.5 );<br /> --kuke-glow-a: rgb( 2 132 199 / 0.12 );<br /> --kuke-glow-b: rgb( 147 51 234 / 0.12 );<br /> --kuke-notice-bg: rgb( 56 189 248 / 0.08 );<br /> --kuke-warn: #fbbf24;<br /> --kuke-warn-bg: rgb( 251 191 36 / 0.1 );<br /> <br /> --opacity-glass: 0.97;<br /> --backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );<br /> }<br /> }<br /> <br /> /* --- 3. 圆角与缓动 -------------------------------------------------------- */<br /> <br /> :root {<br /> --border-radius-base: 12px;<br /> --border-radius-medium: 16px;<br /> --border-radius-large: 24px;<br /> --border-radius-pill: 9999px;<br /> --border-radius-sharp: 8px;<br /> <br /> --transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );<br /> --transition-duration-base: 0.3s;<br /> }<br /> <br /> /* --- 4. 背景氛围光斑 ------------------------------------------------------ */<br /> <br /> body::before,<br /> body::after {<br /> content: &quot;&quot;;<br /> position: fixed;<br /> z-index: 0;<br /> width: 40%;<br /> height: 40%;<br /> border-radius: 9999px;<br /> filter: blur( 100px );<br /> pointer-events: none;<br /> }<br /> <br /> body::before {<br /> top: -10%;<br /> left: -10%;<br /> background-color: var( --kuke-glow-a );<br /> }<br /> <br /> body::after {<br /> right: -10%;<br /> bottom: -10%;<br /> background-color: var( --kuke-glow-b );<br /> }<br /> <br /> /* 只抬升正文容器，让它盖住上面的光斑。<br /> 顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，<br /> 一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */<br /> .citizen-body-container {<br /> position: relative;<br /> z-index: 1;<br /> }<br /> <br /> /* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */<br /> <br /> .citizen-header {<br /> background-color: var( --kuke-glass );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-header-position-top .citizen-header,<br /> .citizen-header-position-mobile-top .citizen-header {<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> border-inline-end: 0;<br /> }<br /> <br /> .citizen-header-position-left .citizen-header {<br /> border-inline-end: 1px solid var( --kuke-glass-border );<br /> }<br /> <br /> .citizen-sticky-header,<br /> .citizen-sticky-header-background {<br /> background-color: var( --kuke-glass );<br /> border-block-end: 1px solid var( --kuke-glass-border );<br /> -webkit-backdrop-filter: blur( 32px ) saturate( 180% );<br /> backdrop-filter: blur( 32px ) saturate( 180% );<br /> }<br /> <br /> .citizen-drawer__card,<br /> .citizen-menu__card,<br /> .citizen-search__card,<br /> .citizen-dropdown__content {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .citizen-header__item a:hover,<br /> .citizen-menu__content-list a:hover {<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 6. 排版 -------------------------------------------------------------- */<br /> <br /> #firstHeading {<br /> font-weight: 800;<br /> letter-spacing: -0.025em;<br /> line-height: 1.15;<br /> }<br /> <br /> .mw-body h2 {<br /> padding-bottom: 0.35em;<br /> border-bottom: 1px solid var( --border-color-subtle );<br /> font-weight: 700;<br /> letter-spacing: -0.015em;<br /> }<br /> <br /> .mw-body h3,<br /> .mw-body h4 {<br /> font-weight: 700;<br /> letter-spacing: -0.01em;<br /> }<br /> <br /> .mw-parser-output {<br /> line-height: 1.7;<br /> }<br /> <br /> /* --- 7. 链接 -------------------------------------------------------------- */<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {<br /> text-decoration: none;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {<br /> text-decoration: underline;<br /> text-underline-offset: 3px;<br /> text-decoration-thickness: 1.5px;<br /> }<br /> <br /> ::selection {<br /> background-color: rgb( 14 165 233 / 0.3 );<br /> }<br /> <br /> /* --- 8. 按钮 -------------------------------------------------------------- */<br /> <br /> .cdx-button,<br /> .mw-ui-button,<br /> .oo-ui-buttonElement-button {<br /> border-radius: 12px;<br /> font-weight: 600;<br /> transition: background-color 0.3s var( --kuke-ease ),<br /> box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary,<br /> .mw-ui-button.mw-ui-progressive {<br /> background-color: var( --kuke-brand-strong );<br /> border-color: var( --kuke-brand-strong );<br /> box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );<br /> }<br /> <br /> .cdx-button--action-progressive.cdx-button--weight-primary:hover,<br /> .mw-ui-button.mw-ui-progressive:hover {<br /> background-color: var( --kuke-brand );<br /> border-color: var( --kuke-brand );<br /> }<br /> <br /> /* --- 9. 搜索框 ------------------------------------------------------------ */<br /> <br /> .citizen-search-box,<br /> .citizen-search__form,<br /> .citizen-typeahead {<br /> border-radius: 12px;<br /> }<br /> <br /> .citizen-search__form:focus-within {<br /> border-color: var( --kuke-brand );<br /> box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );<br /> }<br /> <br /> /* --- 10. 表格 ------------------------------------------------------------- */<br /> <br /> .wikitable {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> border-collapse: separate;<br /> border-spacing: 0;<br /> overflow: hidden;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th,<br /> .wikitable &gt; * &gt; tr &gt; td {<br /> border: 0;<br /> border-bottom: 1px solid var( --border-color-base );<br /> padding: 0.6em 0.9em;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr:last-child &gt; th,<br /> .wikitable &gt; * &gt; tr:last-child &gt; td {<br /> border-bottom: 0;<br /> }<br /> <br /> .wikitable &gt; * &gt; tr &gt; th {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> font-weight: 700;<br /> }<br /> <br /> .wikitable &gt; tbody &gt; tr:hover &gt; td {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> /* --- 11. 代码 ------------------------------------------------------------- */<br /> <br /> code,<br /> kbd,<br /> samp,<br /> tt {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 8px;<br /> background-color: var( --color-surface-2 );<br /> font-family: var( --font-family-monospace );<br /> font-size: 0.875em;<br /> }<br /> <br /> pre,<br /> .mw-code {<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> background-color: var( --color-surface-2 );<br /> padding: 1em 1.2em;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* --- 12. 图片 ------------------------------------------------------------- */<br /> <br /> .thumbinner,<br /> .mw-halign-left,<br /> .mw-halign-right {<br /> border-radius: 16px;<br /> }<br /> <br /> .thumbinner {<br /> border: 1px solid var( --kuke-card-border );<br /> background-color: var( --kuke-card-bg );<br /> padding: 8px;<br /> box-shadow: var( --kuke-shadow );<br /> transition: box-shadow 0.3s var( --kuke-ease ),<br /> border-color 0.3s var( --kuke-ease );<br /> }<br /> <br /> .thumbinner:hover {<br /> border-color: var( --kuke-card-border-hover );<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> .thumbimage,<br /> .mw-file-element {<br /> border: 0;<br /> border-radius: 12px;<br /> }<br /> <br /> /* --- 13. 消息框 ----------------------------------------------------------- */<br /> <br /> .cdx-message,<br /> .mw-message-box,<br /> .mw-warning,<br /> .catlinks {<br /> border-radius: 16px;<br /> border: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .catlinks {<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .mw-normal-catlinks a {<br /> display: inline-block;<br /> padding: 2px 12px;<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-2 );<br /> font-size: 0.875em;<br /> transition: background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-normal-catlinks a:hover {<br /> background-color: var( --kuke-brand-strong );<br /> color: #fff;<br /> text-decoration: none;<br /> }<br /> <br /> /* --- 14. 滚动条 ----------------------------------------------------------- */<br /> <br /> * {<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --color-surface-4 ) transparent;<br /> }<br /> <br /> ::-webkit-scrollbar {<br /> width: 8px;<br /> height: 8px;<br /> }<br /> <br /> ::-webkit-scrollbar-track {<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb {<br /> border-radius: 9999px;<br /> background-color: var( --color-surface-4 );<br /> }<br /> <br /> ::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --color-subtle );<br /> }<br /> <br /> /* --- 15. 焦点环 ----------------------------------------------------------- */<br /> <br /> a:focus-visible,<br /> button:focus-visible,<br /> input:focus-visible,<br /> select:focus-visible,<br /> textarea:focus-visible,<br /> [tabindex]:focus-visible {<br /> outline: 2px solid var( --kuke-brand );<br /> outline-offset: 2px;<br /> border-radius: 8px;<br /> }<br /> <br /> /* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */<br /> <br /> .kw-figure {<br /> margin: 1.4em auto;<br /> text-align: center;<br /> }<br /> <br /> .kw-figure img {<br /> max-width: 100%;<br /> height: auto;<br /> border-radius: 12px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-figcaption {<br /> display: block;<br /> margin-top: 0.6em;<br /> color: var( --color-subtle );<br /> font-size: 0.875em;<br /> line-height: 1.5;<br /> }<br /> <br /> .kw-notice {<br /> margin: 1.2em 0;<br /> padding: 0.85em 1.1em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-left: 4px solid var( --kuke-brand );<br /> border-radius: 12px;<br /> background-color: var( --kuke-notice-bg );<br /> color: var( --color-base );<br /> line-height: 1.7;<br /> }<br /> <br /> .kw-notice &gt; :first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .kw-notice &gt; :last-child {<br /> margin-bottom: 0;<br /> }<br /> <br /> .kw-notice--warn {<br /> border-left-color: var( --kuke-warn );<br /> background-color: var( --kuke-warn-bg );<br /> }<br /> <br /> .kw-faq {<br /> margin: 1em 0;<br /> padding: 0.9em 1.2em;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 14px;<br /> background-color: var( --kuke-card-bg );<br /> }<br /> <br /> .kw-faq[ open ] {<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kw-faq__q {<br /> color: var( --color-emphasized );<br /> font-weight: 600;<br /> cursor: pointer;<br /> list-style: none;<br /> }<br /> <br /> .kw-faq__q::-webkit-details-marker {<br /> display: none;<br /> }<br /> <br /> .kw-faq__q::before {<br /> content: '';<br /> display: inline-block;<br /> width: 0.5em;<br /> height: 0.5em;<br /> margin-right: 0.7em;<br /> border-right: 2px solid var( --kuke-brand );<br /> border-bottom: 2px solid var( --kuke-brand );<br /> transform: rotate( -45deg ) translateY( -0.1em );<br /> transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q::before {<br /> transform: rotate( 45deg ) translateY( -0.15em );<br /> }<br /> <br /> .kw-faq[ open ] &gt; .kw-faq__q {<br /> margin-bottom: 0.7em;<br /> padding-bottom: 0.7em;<br /> border-bottom: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* --- 17. 减少动效 --------------------------------------------------------- */<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> *,<br /> *::before,<br /> *::after {<br /> animation-duration: 0.01ms !important;<br /> transition-duration: 0.01ms !important;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> Kuke Wiki — 首页布局层<br /> 排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：<br /> .mp-wrapper 通栏纵向流，gap 6px<br /> .mp-inline-sections grid 2fr 1fr，左栏跨两行（&quot;left site&quot; / &quot;left right&quot;）<br /> .mp-section 统一 padding 12px 的内容盒<br /> .mp-icon-wrapper flex-wrap 图标格子墙<br /> 紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；<br /> 配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。<br /> ========================================================================== */<br /> <br /> /* 首页取消正文最大宽度限制。<br /> Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的<br /> 栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */<br /> .page-首页,<br /> .page-Main_Page {<br /> --width-layout: 1560px;<br /> }<br /> <br /> .page-首页 .mw-parser-output,<br /> .page-Main_Page .mw-parser-output {<br /> max-width: none;<br /> }<br /> <br /> .page-首页 .mw-parser-output *,<br /> .page-Main_Page .mw-parser-output * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* 首页隐藏 Citizen 自带的页面 chrome：<br /> - .citizen-page-header 标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条<br /> - .citizen-page-footer 分类链接 + 「最后修改时间」<br /> - #citizen-page-header-sticky-sentinel 隐藏后 setupObservers.js 读到<br /> display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条<br /> 首页是自带横幅的门户页，这些元信息只会干扰版面。 */<br /> .page-首页 .citizen-page-header,<br /> .page-Main_Page .citizen-page-header,<br /> .page-首页 .citizen-page-footer,<br /> .page-Main_Page .citizen-page-footer,<br /> .page-首页 #citizen-page-header-sticky-sentinel,<br /> .page-Main_Page #citizen-page-header-sticky-sentinel,<br /> .page-首页 .printfooter,<br /> .page-Main_Page .printfooter {<br /> display: none;<br /> }<br /> <br /> /* header 被移除后正文顶部不再有它撑出的间距，补回来 */<br /> .page-首页 .citizen-body-container,<br /> .page-Main_Page .citizen-body-container {<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> /* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 &lt;p&gt;，这会在<br /> flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。<br /> display:contents 让 &lt;p&gt; 在布局树中消失，子元素直接成为容器项。<br /> 凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */<br /> .mp-wrapper &gt; p,<br /> .mp-inline-sections &gt; p,<br /> .mp-left &gt; p,<br /> .mp-right &gt; p,<br /> .mp-banner &gt; p,<br /> .mp-banner-content &gt; p,<br /> .mp-portal-wrapper &gt; p,<br /> .mp-highlight-wrapper &gt; p,<br /> .mp-icon-wrapper &gt; p,<br /> .mp-platform-wrapper &gt; p,<br /> .mp-button-wrapper &gt; p,<br /> .mp-category-wrapper &gt; p,<br /> .mp-social-wrapper &gt; p,<br /> .mp-stat-wrapper &gt; p,<br /> .mp-community-wrapper &gt; p {<br /> display: contents;<br /> margin: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 0. 首页令牌<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper {<br /> --mp-gap: 6px;<br /> --mp-pad: 12px;<br /> --mp-radius: 8px;<br /> --mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );<br /> --mp-bg: var( --kuke-card-bg, #fff );<br /> --mp-bg-soft: #f8fafc;<br /> --mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );<br /> --mp-brand: var( --kuke-brand-strong, #0284c7 );<br /> --mp-heading: var( --color-emphasized, #0f172a );<br /> --mp-muted: var( --color-subtle, #54595d );<br /> --mp-banner-bg: #0b2545;<br /> --mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );<br /> --mp-on-brand: #fff;<br /> --mp-new: #d73333;<br /> --icon-base-width: 84px;<br /> --icon-max-width: 128px;<br /> <br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> gap: var( --mp-gap );<br /> margin-block-start: 0.25rem;<br /> }<br /> <br /> .mp-wrapper &gt; .mp-section,<br /> .mp-wrapper &gt; .mp-portal-wrapper {<br /> width: 100%;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 1. 通用区块盒 .mp-section<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-section {<br /> padding: var( --mp-pad );<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> min-width: 0;<br /> }<br /> <br /> .mp-section-title {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin: 0 0 8px;<br /> padding-block-end: 8px;<br /> border-block-end: var( --mp-border );<br /> font-size: 1.0625rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-section-title .mp-i {<br /> flex: none;<br /> width: 18px;<br /> height: 18px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-section-title .mp-more {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 500;<br /> color: var( --mp-muted );<br /> white-space: nowrap;<br /> }<br /> <br /> .mp-section-text {<br /> margin: 0 0 8px;<br /> font-size: 0.875rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-section-text:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-banner {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> padding: 0;<br /> overflow: hidden;<br /> border-color: transparent;<br /> }<br /> <br /> .mp-banner-img {<br /> flex: 1 1 340px;<br /> min-height: 190px;<br /> background-color: var( --mp-banner-bg, #0b2545 );<br /> background-image:<br /> linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),<br /> url( &quot;https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png&quot; );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: cover;<br /> }<br /> <br /> .mp-banner-content {<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> gap: 10px;<br /> flex: 1 1 420px;<br /> padding: 18px 20px;<br /> }<br /> <br /> .mp-banner-eyebrow {<br /> display: inline-flex;<br /> align-self: flex-start;<br /> padding: 3px 9px;<br /> border-radius: 999px;<br /> background-color: var( --mp-bg-tint );<br /> font-size: 0.6875rem;<br /> font-weight: 700;<br /> letter-spacing: 0.04em;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-banner-title {<br /> margin: 0;<br /> font-size: 1.75rem;<br /> font-weight: 800;<br /> line-height: 1.25;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-banner-desc {<br /> margin: 0;<br /> max-width: 62ch;<br /> font-size: 0.9375rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-portal-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> width: 100%;<br /> margin: 1px 0;<br /> gap: 0;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> margin-inline-start: -1px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal:first-child {<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 7px;<br /> padding: 10px 14px;<br /> border: var( --mp-border );<br /> background-color: var( --mp-bg );<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, color 0.15s, border-color 0.15s;<br /> }<br /> <br /> .mp-portal:first-child &gt; a {<br /> border-start-start-radius: var( --mp-radius );<br /> border-end-start-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal:last-child &gt; a {<br /> border-start-end-radius: var( --mp-radius );<br /> border-end-end-radius: var( --mp-radius );<br /> }<br /> <br /> .mp-portal &gt; a:hover {<br /> z-index: 1;<br /> position: relative;<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-portal &gt; a .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 4. 主网格 .mp-inline-sections<br /> 窄屏：单列 site → left → right<br /> 宽屏：grid-template-areas &quot;left site&quot; / &quot;left right&quot;，左栏跨两行<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-inline-sections {<br /> display: grid;<br /> grid-template-columns: 1fr;<br /> grid-template-areas:<br /> 'site'<br /> 'left'<br /> 'right';<br /> gap: var( --mp-gap );<br /> width: 100%;<br /> }<br /> <br /> .mp-site {<br /> grid-area: site;<br /> }<br /> <br /> .mp-left {<br /> grid-area: left;<br /> }<br /> <br /> .mp-right {<br /> grid-area: right;<br /> }<br /> <br /> .mp-left,<br /> .mp-right {<br /> display: flex;<br /> flex-direction: column;<br /> gap: var( --mp-gap );<br /> min-width: 0;<br /> }<br /> <br /> /* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */<br /> .mp-right &gt; :last-child {<br /> flex: 1;<br /> }<br /> <br /> @media ( min-width: 1000px ) {<br /> .mp-inline-sections {<br /> grid-template-columns: 2fr 1fr;<br /> grid-template-rows: auto 1fr;<br /> grid-template-areas:<br /> 'left site'<br /> 'left right';<br /> }<br /> }<br /> <br /> /* 右上角欢迎块 */<br /> .mp-site-title {<br /> margin: 0 0 6px;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-site-text {<br /> margin: 0 0 10px;<br /> font-size: 0.8125rem;<br /> line-height: 1.7;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-social-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-social-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-social {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 7px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-social {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-social .mp-i {<br /> flex: none;<br /> width: 14px;<br /> height: 14px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 5. 左栏顶部两张大卡 .mp-highlight-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-highlight-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-highlight {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 6px;<br /> height: 100%;<br /> padding: 14px 16px;<br /> border: var( --mp-border );<br /> border-radius: var( --mp-radius );<br /> background-color: var( --mp-bg );<br /> background-image: linear-gradient(<br /> 135deg,<br /> var( --mp-bg-tint ) 0%,<br /> transparent 62%<br /> );<br /> transition: border-color 0.15s, box-shadow 0.15s;<br /> }<br /> <br /> a:hover .mp-highlight {<br /> border-color: var( --mp-brand );<br /> box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );<br /> }<br /> <br /> .mp-highlight-head {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-highlight-head .mp-i {<br /> flex: none;<br /> width: 20px;<br /> height: 20px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-highlight-desc {<br /> font-size: 0.8125rem;<br /> line-height: 1.65;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-highlight-cta {<br /> margin-block-start: auto;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-icon-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: auto;<br /> }<br /> <br /> .mp-icon-wrapper &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-icon {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> gap: 4px;<br /> height: 100%;<br /> padding: 10px 4px 8px;<br /> border: 1px solid transparent;<br /> border-radius: 6px;<br /> text-align: center;<br /> transition: background-color 0.15s, border-color 0.15s;<br /> }<br /> <br /> a:hover .mp-icon {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-icon .mp-i {<br /> flex: none;<br /> width: 30px;<br /> height: 30px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-icon-link {<br /> flex: 1;<br /> font-size: 0.75rem;<br /> font-weight: 600;<br /> line-height: 1.35;<br /> color: var( --mp-heading );<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-wrapper {<br /> --icon-base-width: 68px;<br /> --icon-max-width: 96px;<br /> }<br /> <br /> .mp-icon .mp-i {<br /> width: 24px;<br /> height: 24px;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-platform-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 5px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-platform {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.5em;<br /> padding: 6px 10px;<br /> border-radius: 5px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-platform {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-platform-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-platform-ver {<br /> margin-inline-start: auto;<br /> font-size: 0.75rem;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-button-wrapper {<br /> display: flex;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-block-start: 10px;<br /> }<br /> <br /> .mp-button-wrapper &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-button {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 6px;<br /> padding: 9px 14px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> .mp-button--primary {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-brand );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> a:hover .mp-button {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-button--primary {<br /> background-color: var( --kuke-brand, #0ea5e9 );<br /> color: var( --mp-on-brand, #fff );<br /> }<br /> <br /> .mp-button .mp-i {<br /> flex: none;<br /> width: 15px;<br /> height: 15px;<br /> background-color: currentcolor;<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-list {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-list li {<br /> margin: 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> }<br /> <br /> .mp-list li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-list a {<br /> display: flex;<br /> align-items: baseline;<br /> gap: 0.6em;<br /> padding: 7px 6px;<br /> border-radius: 4px;<br /> font-size: 0.875rem;<br /> line-height: 1.5;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> .mp-list a:hover {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-list small {<br /> margin-inline-start: auto;<br /> flex: none;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-timeline {<br /> display: flex;<br /> flex-direction: column;<br /> margin: 0 0 0 6px;<br /> border-inline-start: 2px solid var( --mp-bg-tint );<br /> }<br /> <br /> .mp-timeline dl {<br /> position: relative;<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0 0.5em;<br /> margin: 0;<br /> padding: 4px 0 10px 15px;<br /> }<br /> <br /> .mp-timeline dl:last-child {<br /> padding-block-end: 0;<br /> }<br /> <br /> .mp-timeline dl::before {<br /> content: '';<br /> position: absolute;<br /> inset-inline-start: -5px;<br /> inset-block-start: 8px;<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background-color: var( --mp-brand );<br /> }<br /> <br /> .mp-timeline dt {<br /> flex: none;<br /> font-size: 0.8125rem;<br /> font-weight: 700;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-timeline dd {<br /> flex: 1 1 100%;<br /> margin: 2px 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 11. 站点数据 .mp-stat-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-stat-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-stat {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1px;<br /> flex: 1 1 76px;<br /> padding: 8px 6px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> text-align: center;<br /> }<br /> <br /> .mp-stat-value {<br /> font-size: 1.25rem;<br /> font-weight: 800;<br /> line-height: 1.15;<br /> font-variant-numeric: tabular-nums;<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-stat-label {<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 12. 最近更新（Special:NewPages 注入的 &lt;ul&gt;）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-feed ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> }<br /> <br /> .mp-feed li {<br /> padding: 5px 0;<br /> border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );<br /> font-size: 0.75rem;<br /> line-height: 1.55;<br /> color: var( --mp-muted );<br /> }<br /> <br /> .mp-feed li:first-child {<br /> border-block-start: 0;<br /> }<br /> <br /> .mp-feed li a {<br /> font-size: 0.8125rem;<br /> font-weight: 500;<br /> }<br /> <br /> /* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */<br /> .mp-feed .mw-newpages-length,<br /> .mp-feed .mw-usertoollinks,<br /> .mp-feed .comment {<br /> display: none;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-category-wrapper &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-category {<br /> display: flex;<br /> align-items: baseline;<br /> justify-content: center;<br /> gap: 0.4em;<br /> padding: 8px 10px;<br /> border: var( --mp-border );<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> white-space: nowrap;<br /> color: var( --mp-heading );<br /> transition: background-color 0.15s, border-color 0.15s, color 0.15s;<br /> }<br /> <br /> a:hover .mp-category {<br /> border-color: var( --mp-brand );<br /> background-color: var( --mp-bg-tint );<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-category b {<br /> font-variant-numeric: tabular-nums;<br /> font-weight: 700;<br /> color: var( --mp-brand );<br /> }<br /> <br /> a:hover .mp-category b {<br /> color: inherit;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 14. 相关社区 .mp-community-wrapper<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-community-wrapper {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> }<br /> <br /> .mp-community-wrapper &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> .mp-community {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 10px;<br /> border-radius: 6px;<br /> background-color: var( --mp-bg-soft );<br /> font-size: 0.8125rem;<br /> transition: background-color 0.15s;<br /> }<br /> <br /> a:hover .mp-community {<br /> background-color: var( --mp-bg-tint );<br /> }<br /> <br /> .mp-community .mp-i {<br /> flex: none;<br /> width: 16px;<br /> height: 16px;<br /> background-color: var( --mp-brand );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-community-name {<br /> font-weight: 600;<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-community-meta {<br /> margin-inline-start: auto;<br /> font-size: 0.6875rem;<br /> color: var( --mp-muted );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-wrapper a {<br /> color: inherit;<br /> text-decoration: none;<br /> background-image: none;<br /> }<br /> <br /> .mp-wrapper .mp-list a,<br /> .mp-wrapper .mp-feed a,<br /> .mp-wrapper .mp-section-title a {<br /> color: var( --mp-heading );<br /> }<br /> <br /> .mp-wrapper .mp-list a:hover,<br /> .mp-wrapper .mp-feed a:hover {<br /> color: var( --mp-brand );<br /> }<br /> <br /> .mp-wrapper a.new,<br /> .mp-wrapper a.new .mp-icon-link,<br /> .mp-wrapper a.new .mp-platform-name {<br /> color: var( --mp-new, #d73333 );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 16. 暗色模式<br /> Citizen 的主题类挂在 &lt;html&gt; 上，共三种需要暗色令牌的形态：<br /> .skin-theme-clientpref-night 手动选「深色」<br /> .skin-theme-clientpref-black 手动选「纯黑」（OLED）<br /> .skin-theme-clientpref-os 跟随系统，仅在 prefers-color-scheme:dark 时<br /> 三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，<br /> 这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，<br /> 不再按主题各抄一遍。<br /> -------------------------------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-wrapper,<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> /* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */<br /> html.skin-theme-clientpref-black .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> /* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），<br /> 类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，<br /> 两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> @media ( prefers-color-scheme: dark ) {<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 255 255 255 / 0.04 );<br /> --mp-bg-soft: rgb( 255 255 255 / 0.02 );<br /> --mp-border: 1px solid rgb( 255 255 255 / 0.1 );<br /> --mp-banner-bg: #000;<br /> }<br /> <br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,<br /> html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 255 255 255 / 0.08 );<br /> }<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-list li,<br /> html.skin-theme-clientpref-night .mp-feed li,<br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );<br /> }<br /> <br /> html.skin-theme-clientpref-black .mp-list li,<br /> html.skin-theme-clientpref-black .mp-feed li {<br /> --mp-hairline: rgb( 255 255 255 / 0.08 );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-highlight,<br /> html.skin-theme-clientpref-black .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-night .mp-timeline,<br /> html.skin-theme-clientpref-black .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> <br /> /* 跟随系统：同样的令牌，只在系统为暗色时生效 */<br /> @media ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-wrapper {<br /> --mp-bg: rgb( 29 41 61 / 0.5 );<br /> --mp-bg-soft: rgb( 15 23 42 / 0.55 );<br /> --mp-bg-tint: rgb( 14 165 233 / 0.14 );<br /> --mp-border: 1px solid rgb( 49 65 88 / 0.6 );<br /> --mp-brand: var( --kuke-brand-hover, #38bdf8 );<br /> --mp-heading: #e8edf4;<br /> --mp-muted: #98a5b8;<br /> --mp-banner-bg: #050a12;<br /> --mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );<br /> --mp-on-brand: #04121f;<br /> --mp-new: #ff8080;<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-list li,<br /> html.skin-theme-clientpref-os .mp-feed li {<br /> border-block-start-color: rgb( 49 65 88 / 0.6 );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-highlight {<br /> background-image: linear-gradient(<br /> 135deg,<br /> rgb( 14 165 233 / 0.16 ) 0%,<br /> transparent 62%<br /> );<br /> }<br /> <br /> html.skin-theme-clientpref-os .mp-timeline {<br /> border-inline-start-color: rgb( 56 189 248 / 0.28 );<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 17. 窄屏收敛<br /> -------------------------------------------------------------------------- */<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-banner-title {<br /> font-size: 1.375rem;<br /> }<br /> <br /> .mp-banner-content {<br /> padding: 14px 16px;<br /> }<br /> <br /> .mp-banner-img {<br /> flex-basis: 100%;<br /> min-height: 150px;<br /> }<br /> <br /> .mp-portal-wrapper {<br /> gap: 6px;<br /> }<br /> <br /> .mp-portal-wrapper .mp-portal {<br /> flex: 1 1 calc( 50% - 3px );<br /> margin-inline-start: 0;<br /> }<br /> <br /> .mp-portal &gt; a {<br /> border-radius: 6px;<br /> }<br /> <br /> .mp-platform-wrapper &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 18. display:contents 穿透修正<br /> Remex 会把整串行内元素包进一个 &lt;p&gt;。上面用 display:contents 抹掉了这个<br /> &lt;p&gt; 的盒子，于是真正参与父 flex 布局的是 &lt;p&gt; 的子元素，而不是 &lt;p&gt; 本身。<br /> 前面的 `.xxx-wrapper &gt; *` 只选中了那个 &lt;p&gt;，flex 值全部落空，格子只能按<br /> 内容宽度收缩。这里把同样的尺寸规则补给孙元素。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-social-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> flex: 1 1 0;<br /> min-width: 300px;<br /> }<br /> <br /> .mp-icon-wrapper &gt; p &gt; * {<br /> flex: 1 auto;<br /> width: var( --icon-base-width );<br /> max-width: var( --icon-max-width );<br /> }<br /> <br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex: 1 1 210px;<br /> min-width: 210px;<br /> }<br /> <br /> .mp-button-wrapper &gt; p &gt; * {<br /> flex: 1 0 0;<br /> min-width: max-content;<br /> }<br /> <br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 130px;<br /> max-width: 220px;<br /> }<br /> <br /> .mp-community-wrapper &gt; p &gt; * {<br /> flex: 1 1 100%;<br /> }<br /> <br /> /* .mp-portal 与 .mp-stat 是 &lt;span&gt;，自身带了 flex 值，只需保证撑满 */<br /> .mp-portal-wrapper &gt; p &gt; .mp-portal {<br /> flex: 1 1 0;<br /> }<br /> <br /> .mp-stat-wrapper &gt; p &gt; .mp-stat {<br /> flex: 1 1 0;<br /> }<br /> <br /> @media ( max-width: 720px ) {<br /> .mp-platform-wrapper &gt; p &gt; * {<br /> flex-basis: 100%;<br /> min-width: 0;<br /> }<br /> <br /> .mp-highlight-wrapper &gt; p &gt; * {<br /> min-width: 0;<br /> flex-basis: 100%;<br /> }<br /> }<br /> <br /> /* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，<br /> 把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */<br /> .mp-right &gt; :last-child {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mp-right &gt; :last-child &gt; .mp-community-wrapper {<br /> flex: 1;<br /> align-content: space-between;<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 19. 首页上下留白收敛<br /> 实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px<br /> 全是空白，由四段叠加而成——<br /> 43px wikitext 开头的行为开关（__NOTOC__ 等）留下的空 &lt;p&gt;<br /> 24px .citizen-body-container 的 margin-block-start<br /> 16px .citizen-body-container 的 padding-block-start<br /> 16px #mw-content-text 的 margin-block-start<br /> 底部 152px = .citizen-body-container 的 margin-block-end 24px<br /> + .citizen-footer 的 margin-block-start 128px。<br /> 首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。<br /> 只对首页生效，条目页排版不受影响。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 首个 &lt;p&gt; 只装了行为开关留下的 &lt;br&gt;，没有可见文字，直接抹掉 */<br /> .page-首页 .mw-parser-output &gt; p:first-child,<br /> .page-Main_Page .mw-parser-output &gt; p:first-child {<br /> display: none;<br /> }<br /> <br /> /* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，<br /> 特异性 0-3-0，这里必须同等强度才压得住 */<br /> .page-首页.action-view .citizen-body-container,<br /> .page-Main_Page.action-view .citizen-body-container {<br /> margin-block: 0;<br /> padding-block-start: var( --space-md, 1rem );<br /> }<br /> <br /> .page-首页 #mw-content-text,<br /> .page-Main_Page #mw-content-text {<br /> margin-block-start: 0;<br /> }<br /> <br /> .page-首页 .citizen-footer,<br /> .page-Main_Page .citizen-footer {<br /> margin-block-start: var( --space-xl, 2rem );<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 20. 分类墙收成一行<br /> 11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」<br /> 单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mp-category-wrapper &gt; *,<br /> .mp-category-wrapper &gt; p &gt; * {<br /> flex: 1 1 110px;<br /> max-width: 220px;<br /> }<br /> <br /> /* ==========================================================================<br /> Kuke Wiki 图标系统 — Font Awesome Free 6.7.2<br /> 图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI<br /> 统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，<br /> 因此深色模式自动适配，无需为每个图标单独配色。<br /> 本文件由 gen-fa.php 生成，勿手改。<br /> ========================================================================== */<br /> <br /> /* --- 1. 首页图标盒子 ------------------------------------------------------ */<br /> <br /> .mp-card__icon,<br /> .mp-pill__icon {<br /> display: block;<br /> flex: none;<br /> width: 28px;<br /> height: 28px;<br /> background-color: var( --kuke-brand-strong, #0284c7 );<br /> -webkit-mask-repeat: no-repeat;<br /> mask-repeat: no-repeat;<br /> -webkit-mask-position: center;<br /> mask-position: center;<br /> -webkit-mask-size: contain;<br /> mask-size: contain;<br /> }<br /> <br /> .mp-pill__icon {<br /> width: 18px;<br /> height: 18px;<br /> background-color: currentcolor;<br /> }<br /> <br /> /* --- 2. 首页图标 ---------------------------------------------------------- */<br /> .mp-icon--book {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--folder {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--clock {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--shuffle {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--pencil {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--link {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--file {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--image {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--compass {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--award {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--tool {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--alert {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--list {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--search {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--upload {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .mp-icon--plus {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 3. 首页图标暗色配色 -------------------------------------------------- */<br /> <br /> html.skin-theme-clientpref-night .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> <br /> @media screen and ( prefers-color-scheme: dark ) {<br /> html.skin-theme-clientpref-os .mp-card__icon {<br /> background-color: var( --kuke-brand-hover, #38bdf8 );<br /> }<br /> }<br /> <br /> /* --- 4. Citizen 内置图标 --------------------------------------------------<br /> 皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，<br /> 这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，<br /> 避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。<br /> 注意：不要改用 background-image —— Menu.less 里有<br /> `background-image: none !important` 会直接干掉它。<br /> -------------------------------------------------------------------------- */<br /> <br /> /* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，<br /> 图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */<br /> .citizen-ui-icon::before {<br /> -webkit-mask-size: 100%;<br /> mask-size: 100%;<br /> }<br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-article::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-block::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-die::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-help::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-history::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-home::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-image::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-language::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-link::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-message::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-move::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-search::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-share::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-star::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-table::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> .citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {<br /> --kuke-i: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E&quot; );<br /> -webkit-mask-image: var( --kuke-i );<br /> mask-image: var( --kuke-i );<br /> }<br /> <br /> /* --- 5. 关闭图标的 hover 动效 ---------------------------------------------<br /> 皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、<br /> ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些<br /> 转动显得突兀，这里逐个点名改成静态。<br /> 只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，<br /> 以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle<br /> ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。<br /> -------------------------------------------------------------------------- */<br /> <br /> :is( a, button, summary ):hover .citizen-ui-icon:is(<br /> .mw-ui-icon-wikimedia-configure,<br /> .mw-ui-icon-wikimedia-edit,<br /> .mw-ui-icon-wikimedia-ellipsis,<br /> .mw-ui-icon-wikimedia-arrowUp,<br /> .mw-ui-icon-wikimedia-speechBubbles,<br /> .mw-ui-icon-wikimedia-userAdd,<br /> .mw-ui-icon-wikimedia-history,<br /> .mw-ui-icon-wikimedia-logIn,<br /> .mw-ui-icon-wikimedia-share<br /> ) {<br /> transform: none;<br /> }<br /> <br /> /* ==========================================================================<br /> 顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）<br /> ========================================================================== */<br /> <br /> /* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，<br /> 不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */<br /> .citizen-header__start {<br /> min-width: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-nav {<br /> display: flex;<br /> align-items: center;<br /> gap: 2px;<br /> min-width: 0;<br /> overflow-x: auto;<br /> scrollbar-width: none;<br /> -ms-overflow-style: none;<br /> }<br /> <br /> .kuke-nav::-webkit-scrollbar {<br /> display: none;<br /> }<br /> <br /> .kuke-nav__link {<br /> position: relative;<br /> display: inline-flex;<br /> flex-shrink: 0;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-radius: 8px;<br /> color: var( --color-subtle );<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> line-height: 1;<br /> white-space: nowrap;<br /> text-decoration: none;<br /> transition:<br /> background-color 0.2s var( --kuke-ease ),<br /> color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-nav__link:visited {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-nav__link:hover,<br /> .kuke-nav__link:focus {<br /> background-color: var( --color-surface-2 );<br /> color: var( --color-emphasized );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-nav__link--active,<br /> .kuke-nav__link--active:visited {<br /> color: var( --kuke-brand-strong );<br /> font-weight: 600;<br /> }<br /> <br /> .kuke-nav__link--active::after {<br /> position: absolute;<br /> right: 12px;<br /> bottom: -6px;<br /> left: 12px;<br /> height: 2px;<br /> content: '';<br /> background-color: var( --kuke-brand-strong );<br /> border-radius: 2px;<br /> }<br /> <br /> .kuke-nav__link--active:hover,<br /> .kuke-nav__link--active:focus {<br /> background-color: var( --kuke-brand-pale );<br /> color: var( --kuke-brand-strong );<br /> }<br /> <br /> /* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */<br /> .citizen-header-position-left .kuke-nav,<br /> .citizen-header-position-right .kuke-nav {<br /> flex-direction: column;<br /> align-items: stretch;<br /> width: 100%;<br /> overflow-x: visible;<br /> }<br /> <br /> .citizen-header-position-left .kuke-nav__link--active::after,<br /> .citizen-header-position-right .kuke-nav__link--active::after {<br /> top: 6px;<br /> right: auto;<br /> bottom: 6px;<br /> left: 0;<br /> width: 2px;<br /> height: auto;<br /> }<br /> <br /> /* 窄屏隐藏，导航交回汉堡抽屉 */<br /> @media screen and ( max-width: 850px ) {<br /> .kuke-nav {<br /> display: none;<br /> }<br /> }<br /> <br /> <br /> /* ==========================================================================<br /> 21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚<br /> 结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /<br /> 友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。<br /> 注意：模板把 footer-desc 塞进 &lt;p id=&quot;footer-desc&quot;&gt;，&lt;p&gt; 不能包含 &lt;div&gt;，<br /> 浏览器解析时会提前闭合 &lt;p&gt;，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo<br /> 的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。<br /> MediaWiki 会转义 wikitext 里的 &lt;svg&gt;，所以图标一律走 CSS mask-image。<br /> -------------------------------------------------------------------------- */<br /> <br /> .citizen-footer {<br /> position: relative;<br /> z-index: 1;<br /> padding-block: 3rem;<br /> margin-top: 2.5rem;<br /> overflow: hidden;<br /> background-color: var( --color-surface-1 );<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> /* 顶边居中对称的 1px 品牌渐变线 */<br /> .citizen-footer::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 1px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgb( 14 165 233 / 0.5 ) 50%,<br /> transparent 100%<br /> );<br /> }<br /> <br /> .citizen-footer__container {<br /> max-width: 1280px;<br /> padding-inline: 2rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .citizen-footer__content {<br /> display: block;<br /> padding-block-end: 0;<br /> }<br /> <br /> /* siteinfo 交给 .kuke-fnav 自己排版 */<br /> .citizen-footer__siteinfo {<br /> display: block;<br /> max-width: none;<br /> margin: 0;<br /> }<br /> <br /> /* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */<br /> .citizen-footer__sitetitle {<br /> display: none;<br /> }<br /> <br /> /* footer-desc 是被浏览器掏空的 &lt;p&gt; 外壳 */<br /> .citizen-footer__desc {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__desc:empty {<br /> display: none;<br /> }<br /> <br /> /* ---- 四栏主体 ---------------------------------------------------------- */<br /> <br /> .kuke-fnav__cols {<br /> display: grid;<br /> grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> margin-block-end: 3rem;<br /> }<br /> <br /> /* 第一栏：品牌 */<br /> .kuke-fnav__brand {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> }<br /> <br /> .kuke-fnav__logo {<br /> flex: none;<br /> width: 40px;<br /> height: 40px;<br /> background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> transition: transform 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__brand:hover .kuke-fnav__logo {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .kuke-fnav__names {<br /> display: flex;<br /> flex-direction: column;<br /> line-height: 1.25;<br /> }<br /> <br /> .kuke-fnav__name {<br /> font-size: 1.25rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-fnav__sub {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-transform: uppercase;<br /> letter-spacing: 0.05em;<br /> opacity: 0.85;<br /> }<br /> <br /> .kuke-fnav__about {<br /> margin-block-start: 1.5rem;<br /> font-size: 0.875rem;<br /> line-height: 1.75;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */<br /> <br /> .kuke-fnav__social {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-start: 1.5rem;<br /> }<br /> <br /> .kuke-si a,<br /> .kuke-si a.external {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 36px;<br /> height: 36px;<br /> font-size: 0;<br /> line-height: 0;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> background-color: transparent;<br /> border-radius: 999px;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-si a::before {<br /> width: 20px;<br /> height: 20px;<br /> content: '';<br /> background-color: currentcolor;<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .kuke-si a:hover,<br /> .kuke-si a:focus-visible {<br /> text-decoration: none;<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-si--qq a:hover {<br /> color: #0099ff;<br /> }<br /> <br /> .kuke-si--bili a:hover {<br /> color: #fb7299;<br /> }<br /> <br /> .kuke-si--gh a:hover,<br /> .kuke-si--mail a:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-si--qq a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--bili a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--gh a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> .kuke-si--mail a::before {<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E&quot; );<br /> }<br /> <br /> /* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */<br /> <br /> .kuke-fnav__title {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> margin-block-end: 1.5rem;<br /> font-size: 1rem;<br /> font-weight: 500;<br /> color: var( --color-emphasized );<br /> letter-spacing: 0;<br /> }<br /> <br /> .kuke-fnav__title::before {<br /> flex: none;<br /> width: 4px;<br /> height: 16px;<br /> content: '';<br /> background-color: var( --kuke-brand );<br /> border-radius: 999px;<br /> }<br /> <br /> .kuke-fnav__col ul {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-fnav__col li {<br /> margin-block: 0.75rem;<br /> line-height: 1.4;<br /> }<br /> <br /> .kuke-fnav__col li:first-child {<br /> margin-block-start: 0;<br /> }<br /> <br /> .kuke-fnav__col li:last-child {<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-fnav__col li a,<br /> .kuke-fnav__col li a.external {<br /> display: inline-block;<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> background-image: none;<br /> padding-inline-end: 0;<br /> transition: color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .kuke-fnav__col li a:hover,<br /> .kuke-fnav__col li a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> }<br /> <br /> /* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */<br /> <br /> .citizen-footer__content #footer-places ul {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem 1.25rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__content #footer-places li {<br /> margin: 0;<br /> }<br /> <br /> .citizen-footer__content #footer-places a {<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> text-decoration: none;<br /> opacity: 0.8;<br /> transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__content #footer-places a:hover,<br /> .citizen-footer__content #footer-places a:focus-visible {<br /> color: var( --kuke-brand-strong );<br /> text-decoration: none;<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */<br /> <br /> .citizen-footer__bottom {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding-block-start: 2rem;<br /> margin-block-start: 2rem;<br /> border-block-start: 1px solid var( --border-color-base );<br /> }<br /> <br /> .citizen-footer__bottom #footer-tagline {<br /> flex: 1 1 auto;<br /> margin: 0;<br /> }<br /> <br /> .kuke-fbot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1rem;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .kuke-fbot__c1 {<br /> font-size: 0.875rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-fbot__c2 {<br /> margin-block-start: 0.25rem;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-fbot__made {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.75rem;<br /> color: var( --color-subtle );<br /> opacity: 0.7;<br /> }<br /> <br /> .kuke-heart {<br /> width: 12px;<br /> height: 12px;<br /> background-color: #ef4444;<br /> mask-image: url( &quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E&quot; );<br /> mask-repeat: no-repeat;<br /> mask-position: center;<br /> mask-size: contain;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons {<br /> flex: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons ul {<br /> display: flex;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons img {<br /> opacity: 0.5;<br /> transition: opacity 0.2s var( --kuke-ease );<br /> }<br /> <br /> .citizen-footer__bottom #footer-icons a:hover img {<br /> opacity: 1;<br /> }<br /> <br /> /* ---- 响应式 ------------------------------------------------------------ */<br /> <br /> @media ( max-width: 1024px ) {<br /> .kuke-fnav__cols {<br /> grid-template-columns: repeat( 2, minmax( 0, 1fr ) );<br /> gap: 2rem;<br /> }<br /> }<br /> <br /> @media ( max-width: 640px ) {<br /> .citizen-footer {<br /> padding-block: 2.5rem;<br /> }<br /> <br /> .citizen-footer__container {<br /> padding-inline: 1.25rem;<br /> }<br /> <br /> .kuke-fnav__cols {<br /> grid-template-columns: 1fr;<br /> gap: 2rem;<br /> margin-block-end: 2rem;<br /> }<br /> <br /> .kuke-fbot {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> <br /> .citizen-footer__bottom {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> }<br /> <br /> <br /> /* --------------------------------------------------------------------------<br /> 22. 登录 / 注册 / 找回密码<br /> Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在<br /> skins.citizen.codex.styles 里给了一条：<br /> .skin-citizen .mw-ui-container &gt; div { display:grid; place-content:center }<br /> #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容<br /> 收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。<br /> 下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。<br /> 注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里<br /> $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。<br /> -------------------------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin .citizen-body-container,<br /> .mw-special-CreateAccount .citizen-body-container,<br /> .mw-special-PasswordReset .citizen-body-container {<br /> background-color: transparent;<br /> border: 0;<br /> box-shadow: none;<br /> }<br /> <br /> /* 整页柔光背景：两团品牌色光斑，压在内容之下 */<br /> .mw-special-Userlogin .mw-body,<br /> .mw-special-CreateAccount .mw-body,<br /> .mw-special-PasswordReset .mw-body {<br /> position: relative;<br /> }<br /> <br /> .mw-special-Userlogin .mw-body::before,<br /> .mw-special-CreateAccount .mw-body::before,<br /> .mw-special-PasswordReset .mw-body::before {<br /> position: fixed;<br /> z-index: -1;<br /> inset: 0;<br /> pointer-events: none;<br /> content: '';<br /> background-image:<br /> radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),<br /> radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );<br /> }<br /> <br /> /* 页面标题：居中，去掉分隔线与操作区 */<br /> .mw-special-Userlogin .citizen-page-header,<br /> .mw-special-CreateAccount .citizen-page-header,<br /> .mw-special-PasswordReset .citizen-page-header {<br /> padding-block-end: 0;<br /> border-block-end: 0;<br /> }<br /> <br /> /* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */<br /> .mw-special-Userlogin .citizen-page-header-inner,<br /> .mw-special-CreateAccount .citizen-page-header-inner,<br /> .mw-special-PasswordReset .citizen-page-header-inner {<br /> display: block;<br /> width: 100%;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-heading,<br /> .mw-special-CreateAccount .citizen-page-heading,<br /> .mw-special-PasswordReset .citizen-page-heading {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container,<br /> .mw-special-CreateAccount .firstHeading-container,<br /> .mw-special-PasswordReset .firstHeading-container {<br /> display: block;<br /> width: 100%;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading,<br /> .mw-special-CreateAccount .firstHeading,<br /> .mw-special-PasswordReset .firstHeading {<br /> display: block;<br /> width: 100%;<br /> font-size: 1.75rem;<br /> text-align: center;<br /> }<br /> <br /> /* 标题下补一行说明文字，替代空荡的 siteSub */<br /> .mw-special-Userlogin .firstHeading-container::after,<br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> display: block;<br /> width: 100%;<br /> margin-block-start: 0.5rem;<br /> font-size: 0.875rem;<br /> font-weight: 400;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin .firstHeading-container::after {<br /> content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';<br /> }<br /> <br /> .mw-special-CreateAccount .firstHeading-container::after {<br /> content: '创建账号，加入 KukeMC 官方百科的编辑与维护';<br /> }<br /> <br /> .mw-special-Userlogin .citizen-page-actions,<br /> .mw-special-CreateAccount .citizen-page-actions,<br /> .mw-special-PasswordReset .citizen-page-actions,<br /> .mw-special-Userlogin .citizen-page-footer,<br /> .mw-special-CreateAccount .citizen-page-footer,<br /> .mw-special-PasswordReset .citizen-page-footer,<br /> .mw-special-Userlogin .printfooter,<br /> .mw-special-CreateAccount .printfooter,<br /> .mw-special-PasswordReset .printfooter {<br /> display: none;<br /> }<br /> <br /> /* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-ui-container,<br /> .mw-special-CreateAccount .mw-ui-container,<br /> .mw-special-PasswordReset .mw-ui-container {<br /> gap: 0;<br /> overflow: visible;<br /> border: 0;<br /> border-radius: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-ui-container &gt; div,<br /> .mw-special-CreateAccount .mw-ui-container &gt; div,<br /> .mw-special-PasswordReset .mw-ui-container &gt; div {<br /> display: block;<br /> place-content: initial;<br /> padding: 0;<br /> }<br /> <br /> /* ---- 表单卡片 ---------------------------------------------------------- */<br /> <br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> position: relative;<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: 25rem;<br /> padding: 2.25rem 2rem 2rem;<br /> margin-inline: auto;<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> box-shadow: var( --kuke-shadow-glow );<br /> }<br /> <br /> /* 卡片顶边品牌渐变条 */<br /> .mw-special-Userlogin #userloginForm::before,<br /> .mw-special-CreateAccount #userloginForm::before,<br /> .mw-special-PasswordReset #userloginForm::before {<br /> position: absolute;<br /> inset-block-start: 0;<br /> inset-inline: 0;<br /> height: 3px;<br /> content: '';<br /> background-image: linear-gradient(<br /> 90deg,<br /> var( --kuke-brand ),<br /> var( --kuke-brand-light ),<br /> var( --kuke-brand-strong )<br /> );<br /> }<br /> <br /> /* 卡片内的站点 logo */<br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> display: block;<br /> width: 52px;<br /> height: 52px;<br /> margin: 0 auto 1.25rem;<br /> content: '';<br /> background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );<br /> background-repeat: no-repeat;<br /> background-position: center;<br /> background-size: contain;<br /> border-radius: 13px;<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> /* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */<br /> .mw-special-Userlogin #userloginForm,<br /> .mw-special-CreateAccount #userloginForm,<br /> .mw-special-PasswordReset #userloginForm {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .mw-special-Userlogin #userloginForm::after,<br /> .mw-special-CreateAccount #userloginForm::after,<br /> .mw-special-PasswordReset #userloginForm::after {<br /> order: -1;<br /> flex: 0 0 auto;<br /> }<br /> <br /> /* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform,<br /> .mw-special-CreateAccount .mw-htmlform,<br /> .mw-special-PasswordReset .mw-htmlform,<br /> .mw-special-Userlogin .mw-htmlform-codex,<br /> .mw-special-CreateAccount .mw-htmlform-codex,<br /> .mw-special-PasswordReset .mw-htmlform-codex {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field,<br /> .mw-special-Userlogin .cdx-field__control,<br /> .mw-special-CreateAccount .cdx-field__control,<br /> .mw-special-PasswordReset .cdx-field__control {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input,<br /> .mw-special-CreateAccount .cdx-text-input,<br /> .mw-special-PasswordReset .cdx-text-input {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input,<br /> .mw-special-CreateAccount .cdx-text-input__input,<br /> .mw-special-PasswordReset .cdx-text-input__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-width: 0;<br /> min-height: 44px;<br /> padding: 0.6rem 0.85rem;<br /> font-size: 0.9375rem;<br /> border-radius: 8px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-text-input__input:focus,<br /> .mw-special-CreateAccount .cdx-text-input__input:focus,<br /> .mw-special-PasswordReset .cdx-text-input__input:focus {<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> /* 字段标签 */<br /> .mw-special-Userlogin .cdx-label__label,<br /> .mw-special-CreateAccount .cdx-label__label,<br /> .mw-special-PasswordReset .cdx-label__label {<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-field,<br /> .mw-special-CreateAccount .cdx-field,<br /> .mw-special-PasswordReset .cdx-field {<br /> margin-block: 0 1rem;<br /> }<br /> <br /> /* ---- 主按钮 ------------------------------------------------------------ */<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit,<br /> .mw-special-Userlogin #mw-createaccount-join,<br /> .mw-special-CreateAccount #mw-createaccount-join {<br /> box-sizing: border-box;<br /> width: 100%;<br /> max-width: none;<br /> min-height: 44px;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin .cdx-button--action-progressive,<br /> .mw-special-CreateAccount .cdx-button--action-progressive,<br /> .mw-special-PasswordReset .cdx-button--action-progressive,<br /> .mw-special-Userlogin .mw-htmlform-submit,<br /> .mw-special-CreateAccount .mw-htmlform-submit,<br /> .mw-special-PasswordReset .mw-htmlform-submit {<br /> background-color: var( --kuke-brand );<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:hover,<br /> .mw-special-CreateAccount .mw-htmlform-submit:hover,<br /> .mw-special-PasswordReset .mw-htmlform-submit:hover,<br /> .mw-special-Userlogin #mw-createaccount-join:hover,<br /> .mw-special-CreateAccount #mw-createaccount-join:hover {<br /> color: #fff;<br /> filter: brightness( 1.06 );<br /> border: 0;<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .mw-special-Userlogin .mw-htmlform-submit:active,<br /> .mw-special-CreateAccount .mw-htmlform-submit:active,<br /> .mw-special-PasswordReset .mw-htmlform-submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> /* 提交按钮所在字段：拉开与上一个输入框的距离 */<br /> .mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,<br /> .mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {<br /> margin-block-start: 0.5rem;<br /> margin-block-end: 0;<br /> }<br /> <br /> /* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */<br /> <br /> .mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,<br /> .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> }<br /> <br /> .mw-special-Userlogin #mw-form-poweredby,<br /> .mw-special-CreateAccount #mw-form-poweredby,<br /> .mw-special-Userlogin #footer-poweredbyico,<br /> .mw-special-CreateAccount #footer-poweredbyico {<br /> display: none;<br /> }<br /> <br /> /* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */<br /> .mw-special-Userlogin .mw-form-related-link-container,<br /> .mw-special-CreateAccount .mw-form-related-link-container {<br /> display: inline-block;<br /> padding: 0;<br /> margin: 0.75rem 0.5rem 0;<br /> font-size: 0.8125rem;<br /> text-align: center;<br /> border: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,<br /> .mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a,<br /> .mw-special-CreateAccount .mw-form-related-link-container a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .mw-special-Userlogin .mw-form-related-link-container a:hover,<br /> .mw-special-CreateAccount .mw-form-related-link-container a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> /* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */<br /> .mw-special-Userlogin #mw-createaccount-cta {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button {<br /> box-sizing: border-box;<br /> display: block;<br /> width: 100%;<br /> min-height: 2.5rem;<br /> margin-block-start: 0.75rem;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: var( --kuke-brand-strong );<br /> background: transparent;<br /> border: 1px solid var( --kuke-brand );<br /> border-radius: 10px;<br /> box-shadow: none;<br /> transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );<br /> }<br /> <br /> .mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {<br /> color: #fff;<br /> background: var( --kuke-brand );<br /> }<br /> <br /> /* 错误 / 提示消息盒 */<br /> .mw-special-Userlogin .cdx-message,<br /> .mw-special-CreateAccount .cdx-message,<br /> .mw-special-PasswordReset .cdx-message {<br /> box-sizing: border-box;<br /> width: 100%;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> border-radius: 8px;<br /> }<br /> <br /> /* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */<br /> <br /> .mw-special-CreateAccount .mw-ui-container {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 1.5rem;<br /> align-items: flex-start;<br /> justify-content: center;<br /> max-width: 52rem;<br /> margin-inline: auto;<br /> }<br /> <br /> .mw-special-CreateAccount #userloginForm {<br /> flex: 0 1 25rem;<br /> margin-inline: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> box-sizing: border-box;<br /> flex: 0 1 23rem;<br /> max-width: 23rem;<br /> padding: 2rem 1.75rem;<br /> background-color: var( --kuke-notice-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 16px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-heading {<br /> margin-block: 0 1rem;<br /> font-size: 1rem;<br /> font-weight: 700;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> /* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标<br /> 留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，<br /> 在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-list {<br /> display: grid;<br /> grid-template-columns: repeat( 3, minmax( 0, 1fr ) );<br /> gap: 0.75rem;<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {<br /> box-sizing: border-box;<br /> display: block;<br /> padding: 0.9rem 0.5rem;<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> text-align: center;<br /> background-color: var( --kuke-card-bg );<br /> background-image: none;<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 10px;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {<br /> margin: 0;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {<br /> display: block;<br /> margin-block-end: 0.15rem;<br /> font-family: inherit;<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> line-height: 1.2;<br /> color: var( --kuke-brand-strong );<br /> text-align: center;<br /> }<br /> <br /> /* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */<br /> .mw-special-CreateAccount .mw-createacct-benefits-container::after {<br /> display: block;<br /> padding-block-start: 1.25rem;<br /> margin-block-start: 1.25rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.9;<br /> color: var( --color-subtle );<br /> white-space: pre-line;<br /> content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';<br /> border-block-start: 1px solid var( --kuke-card-border );<br /> }<br /> <br /> @media ( max-width: 900px ) {<br /> .mw-special-CreateAccount .mw-ui-container {<br /> max-width: 27rem;<br /> }<br /> <br /> .mw-special-CreateAccount .mw-createacct-benefits-container {<br /> flex: 1 1 100%;<br /> max-width: none;<br /> }<br /> }<br /> <br /> /* --------------------------------------------------------------------------<br /> 23. 横版登录 / 注册弹窗<br /> kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走<br /> Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。<br /> 弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。<br /> z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。<br /> -------------------------------------------------------------------------- */<br /> <br /> .kuke-auth {<br /> position: fixed;<br /> z-index: 1000;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding: 1.5rem;<br /> inset: 0;<br /> }<br /> <br /> .kuke-auth[hidden] {<br /> display: none;<br /> }<br /> <br /> body.kuke-auth-open {<br /> overflow: hidden;<br /> }<br /> <br /> .kuke-auth__backdrop {<br /> position: absolute;<br /> background-color: rgba( 15, 23, 42, 0.55 );<br /> backdrop-filter: blur( 6px );<br /> inset: 0;<br /> animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> position: relative;<br /> z-index: 1;<br /> box-sizing: border-box;<br /> display: grid;<br /> grid-template-columns: 17.5rem minmax( 0, 1fr );<br /> width: 100%;<br /> max-width: 46rem;<br /> height: min( 38rem, calc( 100vh - 3rem ) );<br /> overflow: hidden;<br /> background-color: var( --kuke-card-bg );<br /> border: 1px solid var( --kuke-card-border );<br /> border-radius: 18px;<br /> box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );<br /> animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;<br /> }<br /> <br /> @keyframes kuke-auth-fade {<br /> from {<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-pop {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 24px ) scale( 0.94 );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-rise {<br /> from {<br /> opacity: 0;<br /> transform: translateY( 10px );<br /> }<br /> }<br /> <br /> @keyframes kuke-auth-spin {<br /> to {<br /> transform: rotate( 360deg );<br /> }<br /> }<br /> <br /> /* ---- 左：品牌栏 -------------------------------------------------------- */<br /> <br /> .kuke-auth__aside {<br /> box-sizing: border-box;<br /> display: flex;<br /> flex-direction: column;<br /> padding: 2rem 1.75rem;<br /> overflow: hidden;<br /> color: #fff;<br /> background-image: linear-gradient(<br /> 160deg,<br /> var( --kuke-brand ) 0%,<br /> var( --kuke-brand-strong ) 55%,<br /> #075985 100%<br /> );<br /> }<br /> <br /> .kuke-auth__logo {<br /> display: block;<br /> width: 44px;<br /> height: 44px;<br /> margin-block-end: 1rem;<br /> border-radius: 11px;<br /> box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );<br /> }<br /> <br /> .kuke-auth__brand {<br /> margin: 0;<br /> font-size: 1.125rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0.25rem 1.5rem;<br /> font-size: 0.8125rem;<br /> color: rgba( 255, 255, 255, 0.78 );<br /> }<br /> <br /> .kuke-auth__points {<br /> padding: 0;<br /> margin: 0;<br /> list-style: none;<br /> }<br /> <br /> .kuke-auth__point {<br /> display: flex;<br /> gap: 0.625rem;<br /> align-items: flex-start;<br /> margin-block-end: 0.875rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: rgba( 255, 255, 255, 0.92 );<br /> }<br /> <br /> .kuke-auth__point-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> color: rgba( 255, 255, 255, 0.7 );<br /> }<br /> <br /> .kuke-auth__note {<br /> padding-block-start: 1.25rem;<br /> margin: auto 0 0;<br /> font-size: 0.75rem;<br /> line-height: 1.6;<br /> color: rgba( 255, 255, 255, 0.68 );<br /> border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );<br /> }<br /> <br /> /* ---- 右：表单栏（内部滚动） -------------------------------------------- */<br /> <br /> .kuke-auth__main {<br /> box-sizing: border-box;<br /> min-height: 0;<br /> padding: 0 2rem 1.75rem;<br /> overflow-y: auto;<br /> overscroll-behavior: contain;<br /> scrollbar-width: thin;<br /> scrollbar-color: var( --border-color-base ) transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar {<br /> width: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-track {<br /> background: transparent;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb {<br /> background-color: var( --border-color-base );<br /> border: 2px solid var( --kuke-card-bg );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__main::-webkit-scrollbar-thumb:hover {<br /> background-color: var( --border-color-interactive );<br /> }<br /> <br /> /* 标题与切换标签固定在滚动区顶部 */<br /> .kuke-auth__head {<br /> position: sticky;<br /> z-index: 3;<br /> padding-block: 2rem 1.25rem;<br /> background-color: var( --kuke-card-bg );<br /> inset-block-start: 0;<br /> }<br /> <br /> .kuke-auth__head::after {<br /> position: absolute;<br /> height: 1.25rem;<br /> pointer-events: none;<br /> content: '';<br /> background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );<br /> inset-block-start: 100%;<br /> inset-inline: 0;<br /> }<br /> <br /> .kuke-auth__close {<br /> position: absolute;<br /> z-index: 4;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 32px;<br /> height: 32px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> inset-block-start: 0.75rem;<br /> inset-inline-end: 0.75rem;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__close:hover {<br /> color: var( --color-emphasized );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__tabs {<br /> display: inline-flex;<br /> gap: 0.25rem;<br /> padding: 0.25rem;<br /> margin-block-end: 1.125rem;<br /> background-color: var( --color-surface-2 );<br /> border-radius: 10px;<br /> }<br /> <br /> .kuke-auth__tab {<br /> padding: 0.4rem 1.1rem;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 8px;<br /> transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__tab:hover {<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__tab--active {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --kuke-card-bg );<br /> box-shadow: var( --kuke-shadow );<br /> }<br /> <br /> .kuke-auth__title {<br /> margin: 0;<br /> font-size: 1.375rem;<br /> font-weight: 700;<br /> line-height: 1.3;<br /> color: var( --color-emphasized );<br /> border: 0;<br /> }<br /> <br /> .kuke-auth__sub {<br /> margin-block: 0.375rem 0;<br /> font-size: 0.8125rem;<br /> line-height: 1.6;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__body {<br /> animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;<br /> }<br /> <br /> /* ---- 表单控件 ---------------------------------------------------------- */<br /> <br /> .kuke-auth__form {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.875rem;<br /> margin: 0;<br /> }<br /> <br /> .kuke-auth__field {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 0.375rem;<br /> }<br /> <br /> .kuke-auth__label {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: baseline;<br /> font-size: 0.8125rem;<br /> font-weight: 600;<br /> color: var( --color-emphasized );<br /> }<br /> <br /> .kuke-auth__optional {<br /> font-size: 0.6875rem;<br /> font-weight: 500;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__control {<br /> position: relative;<br /> display: block;<br /> }<br /> <br /> .kuke-auth__input {<br /> box-sizing: border-box;<br /> width: 100%;<br /> min-width: 0;<br /> height: 2.75rem;<br /> padding: 0 0.875rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> color: var( --color-base );<br /> background-color: var( --color-surface-0 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: 10px;<br /> transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__input::placeholder {<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__input:hover {<br /> border-color: var( --border-color-interactive );<br /> }<br /> <br /> .kuke-auth__input:focus {<br /> background-color: var( --kuke-card-bg );<br /> border-color: var( --kuke-brand );<br /> outline: 0;<br /> box-shadow: 0 0 0 3px var( --kuke-brand-pale );<br /> }<br /> <br /> .kuke-auth__control--peek .kuke-auth__input {<br /> padding-inline-end: 2.75rem;<br /> }<br /> <br /> .kuke-auth__peek {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 30px;<br /> height: 30px;<br /> padding: 0;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> background-color: transparent;<br /> border: 0;<br /> border-radius: 7px;<br /> inset-block-start: 50%;<br /> inset-inline-end: 0.375rem;<br /> transform: translateY( -50% );<br /> transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__peek:hover {<br /> color: var( --kuke-brand-strong );<br /> background-color: var( --color-surface-2 );<br /> }<br /> <br /> .kuke-auth__hint {<br /> margin: 0;<br /> font-size: 0.75rem;<br /> line-height: 1.5;<br /> color: var( --color-subtle );<br /> }<br /> <br /> /* 验证码题面 */<br /> .kuke-auth__captcha {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> padding: 0.5rem 0.75rem;<br /> margin: 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-emphasized );<br /> background-color: var( --kuke-brand-pale );<br /> border-radius: 8px;<br /> }<br /> <br /> .kuke-auth__captcha-q {<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .kuke-auth__check {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__check input {<br /> width: 16px;<br /> height: 16px;<br /> margin: 0;<br /> accent-color: var( --kuke-brand );<br /> cursor: pointer;<br /> }<br /> <br /> .kuke-auth__submit {<br /> box-sizing: border-box;<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: center;<br /> justify-content: center;<br /> width: 100%;<br /> height: 2.875rem;<br /> margin-block-start: 0.375rem;<br /> font-family: inherit;<br /> font-size: 0.9375rem;<br /> font-weight: 600;<br /> color: #fff;<br /> cursor: pointer;<br /> background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );<br /> border: 0;<br /> border-radius: 10px;<br /> transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> filter: brightness( 1.06 );<br /> box-shadow: var( --kuke-shadow-brand );<br /> transform: translateY( -1px );<br /> }<br /> <br /> .kuke-auth__submit:active {<br /> transform: translateY( 0 );<br /> }<br /> <br /> .kuke-auth__submit[disabled] {<br /> cursor: default;<br /> opacity: 0.75;<br /> box-shadow: none;<br /> transform: none;<br /> }<br /> <br /> .kuke-auth__spinner {<br /> display: block;<br /> flex: 0 0 auto;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid rgba( 255, 255, 255, 0.4 );<br /> border-block-start-color: #fff;<br /> border-radius: 50%;<br /> animation: kuke-auth-spin 0.7s linear infinite;<br /> }<br /> <br /> /* 错误提示条 */<br /> .kuke-auth__alert {<br /> display: flex;<br /> gap: 0.5rem;<br /> align-items: flex-start;<br /> padding: 0.75rem 0.875rem;<br /> margin-block-end: 1rem;<br /> font-size: 0.8125rem;<br /> line-height: 1.55;<br /> color: #b91c1c;<br /> background-color: rgba( 239, 68, 68, 0.1 );<br /> border-inline-start: 3px solid #ef4444;<br /> border-radius: 8px;<br /> animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;<br /> }<br /> <br /> .kuke-auth__alert[hidden] {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__alert-icon {<br /> flex: 0 0 auto;<br /> margin-block-start: 1px;<br /> }<br /> <br /> .kuke-auth__foot {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.375rem;<br /> align-items: center;<br /> justify-content: center;<br /> margin-block: 1.125rem 0;<br /> font-size: 0.8125rem;<br /> color: var( --color-subtle );<br /> }<br /> <br /> .kuke-auth__foot a {<br /> font-weight: 600;<br /> color: var( --kuke-brand );<br /> text-decoration: none;<br /> }<br /> <br /> .kuke-auth__foot a:hover {<br /> text-decoration: underline;<br /> }<br /> <br /> .kuke-auth__dot {<br /> color: var( --border-color-base );<br /> }<br /> <br /> /* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */<br /> <br /> @media ( max-width: 720px ) {<br /> .kuke-auth {<br /> padding: 0;<br /> align-items: flex-end;<br /> }<br /> <br /> .kuke-auth__dialog {<br /> grid-template-columns: minmax( 0, 1fr );<br /> grid-template-rows: auto minmax( 0, 1fr );<br /> height: auto;<br /> max-height: 92vh;<br /> border-radius: 18px 18px 0 0;<br /> }<br /> <br /> .kuke-auth__aside {<br /> flex-direction: row;<br /> gap: 0.75rem;<br /> align-items: center;<br /> padding: 1.25rem 1.5rem;<br /> }<br /> <br /> .kuke-auth__logo {<br /> width: 36px;<br /> height: 36px;<br /> margin-block-end: 0;<br /> }<br /> <br /> .kuke-auth__tagline {<br /> margin-block: 0;<br /> }<br /> <br /> .kuke-auth__points,<br /> .kuke-auth__note {<br /> display: none;<br /> }<br /> <br /> .kuke-auth__main {<br /> padding-inline: 1.5rem;<br /> }<br /> <br /> .kuke-auth__head {<br /> padding-block: 1.5rem 1rem;<br /> }<br /> }<br /> <br /> @media ( prefers-reduced-motion: reduce ) {<br /> .kuke-auth__backdrop,<br /> .kuke-auth__dialog,<br /> .kuke-auth__body,<br /> .kuke-auth__alert {<br /> animation: none;<br /> }<br /> <br /> .kuke-auth__submit:hover {<br /> transform: none;<br /> }<br /> }/* cache-probe */</div>

Kuke