MediaWiki:Common.css：修订间差异

2026年4月11日 (六) 20:27的版本

/* 这里放置的CSS将应用于所有皮肤 */
/**
 * See [[MediaWiki:Vector.css]] for desktop theme related styles.
 * See [[MediaWiki:Vector-theme-dark.css]] for desktop dark theme related styles.
 *
 * See [[MediaWiki:Minerva.css]] for mobile theme related styles.
 * See [[MediaWiki:Minerva-theme-dark.css]] for mobile dark theme related styles.
 */

/* Minecraft font */
@font-face {
	font-family: Minecraft;
	src: url('filepath://Minecraft.woff2') format('woff2'),
	     url('filepath://Minecraft.woff') format('woff');
}
@font-face {
    font-family: Unifont;
    src: url('filepath://Unifont.woff2') format('woff2');
}

/* Codex Design tokens */
:root,
.skin-invert,
.notheme {
	--color-base: #202122;
	--color-base-fixed: #202122;
	--color-base--hover: #404244;
	--color-emphasized: #101418;
	--color-subtle: #54595d;
	--color-placeholder: #72777d;
	--color-disabled: #a2a9b1;
	--color-disabled-emphasized: #a2a9b1;
	--color-inverted: #fff;
	--color-inverted-fixed: #fff;
	--color-progressive: #36c;
	--color-progressive--hover: #3056a9;
	--color-progressive--active: #233566;
	--color-progressive--focus: #36c;
	--color-destructive: #bf3c2c;
	--color-destructive--hover: #9f3526;
	--color-destructive--active: #612419;
	--color-destructive--focus: #36c;
	--color-visited: #6a60b0;
	--color-visited--hover: #534fa3;
	--color-visited--active: #353262;
	--color-destructive--visited: #9f5555;
	--color-destructive--visited--hover: #854848;
	--color-destructive--visited--active: #512e2e;
	--color-error: #bf3c2c;
	--color-error--hover: #9f3526;
	--color-error--active: #612419;
	--color-warning: #886425;
	--color-success: #177860;
	--color-notice: #404244;
	--color-icon-error: #f54739;
	--color-icon-warning: #ab7f2a;
	--color-icon-success: #099979;
	--color-icon-notice: #72777d;
	--color-content-added: #006400;
	--color-content-removed: #8b0000;
	--filter-invert-icon: 0;
	--filter-invert-primary-button-icon: 1;
	--box-shadow-color-base: #a2a9b1;
	--box-shadow-color-progressive--active: #233566;
	--box-shadow-color-progressive--focus: #36c;
	--box-shadow-color-progressive-selected: #36c;
	--box-shadow-color-progressive-selected--hover: #3056a9;
	--box-shadow-color-progressive-selected--active: #233566;
	--box-shadow-color-destructive--focus: #36c;
	--box-shadow-color-inverted: #fff;
	--box-shadow-color-alpha-base: rgba( 0, 0, 0, 0.06 );
	--box-shadow-color-transparent: transparent;
	--font-size-x-small: 0.75rem;
	--font-size-small: 0.875rem;
	--font-size-medium: 1rem;
	--font-size-large: 1.125rem;
	--font-size-x-large: 1.25rem;
	--font-size-xx-large: 1.5rem;
	--font-size-xxx-large: 1.75rem;
	--line-height-x-small: 1.25rem;
	--line-height-small: 1.375rem;
	--line-height-medium: 1.625rem;
	--line-height-large: 1.75rem;
	--line-height-x-large: 1.875rem;
	--line-height-xx-large: 2.125rem;
	--line-height-xxx-large: 2.375rem;
	--line-height-content: 1.625;
	--mix-blend-mode-base: normal;
	--mix-blend-mode-blend: multiply;
	--background-color-base: #fff;
	--background-color-base-fixed: #fff;
	--background-color-neutral: #eaecf0;
	--background-color-neutral-subtle: #f8f9fa;
	--background-color-interactive: #eaecf0;
	--background-color-interactive--hover: #dadde3;
	--background-color-interactive--active: #c8ccd1;
	--background-color-interactive-subtle: #f8f9fa;
	--background-color-interactive-subtle--hover: #eaecf0;
	--background-color-interactive-subtle--active: #dadde3;
	--background-color-disabled: #dadde3;
	--background-color-disabled-subtle: #eaecf0;
	--background-color-inverted: #101418;
	--background-color-progressive: #36c;
	--background-color-progressive--hover: #3056a9;
	--background-color-progressive--active: #233566;
	--background-color-progressive--focus: #36c;
	--background-color-progressive-subtle: #e8eeff;
	--background-color-progressive-subtle--hover: #d9e2ff;
	--background-color-progressive-subtle--active: #b6d4fb;
	--background-color-destructive: #bf3c2c;
	--background-color-destructive--hover: #9f3526;
	--background-color-destructive--active: #612419;
	--background-color-destructive--focus: #36c;
	--background-color-destructive-subtle: #ffe9e5;
	--background-color-destructive-subtle--hover: #ffdad3;
	--background-color-destructive-subtle--active: #ffc8bd;
	--background-color-error: #f54739;
	--background-color-error--hover: #d74032;
	--background-color-error--active: #bf3c2c;
	--background-color-error-subtle: #ffe9e5;
	--background-color-error-subtle--hover: #ffdad3;
	--background-color-error-subtle--active: #ffc8bd;
	--background-color-warning-subtle: #fdf2d5;
	--background-color-success-subtle: #dff2eb;
	--background-color-notice-subtle: #eaecf0;
	--background-color-content-added: #a3d3ff;
	--background-color-content-removed: #ffe49c;
	--background-color-transparent: transparent;
	--background-color-backdrop-light: rgba( 255, 255, 255, 0.65 );
	--background-color-backdrop-dark: rgba( 0, 0, 0, 0.65 );
	--background-color-button-quiet--hover: rgba( 0, 24, 73, 0.027 );
	--background-color-button-quiet--active: rgba( 0, 24, 73, 0.082 );
	--background-color-input-binary--checked: #36c;
	--background-color-tab-list-item-framed--hover: rgba( 255, 255, 255, 0.3 );
	--background-color-tab-list-item-framed--active: rgba( 255, 255, 255, 0.65 );
	--opacity-icon-base: 0.87;
	--opacity-icon-base--hover: 0.74;
	--opacity-icon-base--selected: 1;
	--opacity-icon-base--disabled: 0.51;
	--opacity-icon-placeholder: 0.51;
	--opacity-icon-subtle: 0.67;
	--border-color-base: #a2a9b1;
	--border-color-emphasized: #202122;
	--border-color-subtle: #c8ccd1;
	--border-color-muted: #dadde3;
	--border-color-interactive: #72777d;
	--border-color-interactive--hover: #27292d;
	--border-color-interactive--active: #202122;
	--border-color-disabled: #c8ccd1;
	--border-color-inverted: #fff;
	--border-color-inverted-fixed: #fff;
	--border-color-progressive: #6485d1;
	--border-color-progressive--hover: #3056a9;
	--border-color-progressive--active: #233566;
	--border-color-progressive--focus: #36c;
	--border-color-destructive: #f54739;
	--border-color-destructive--hover: #9f3526;
	--border-color-destructive--active: #612419;
	--border-color-destructive--focus: #36c;
	--border-color-error: #f54739;
	--border-color-error--hover: #9f3526;
	--border-color-error--active: #612419;
	--border-color-warning: #ab7f2a;
	--border-color-warning--hover: #735421;
	--border-color-warning--active: #453217;
	--border-color-success: #099979;
	--border-color-notice: #72777d;
	--border-color-content-added: #a3d3ff;
	--border-color-content-removed: #ffe49c;
	--border-color-transparent: transparent;
	--border-color-divider: #a2a9b1;
	--outline-color-progressive--focus: #36c;
	--color-link: var( --color-progressive );
	--color-link--hover: var( --color-progressive--hover );
	--color-link--active: var( --color-progressive--active );
	--color-link--focus: var( --color-progressive--focus );
	--color-link--visited: var( --color-visited );
	--color-link--visited--hover: var( --color-visited--hover );
	--color-link--visited--active: var( --color-visited--active );
	--color-link-red: var( --color-destructive );
	--color-link-red--hover: var( --color-destructive--hover );
	--color-link-red--active: var( --color-destructive--active );
	--color-link-red--focus: var( --color-destructive--focus );
	--color-link-red--visited: var( --color-destructive--visited );
	--color-link-red--visited--hover: var( --color-destructive--visited--hover );
	--color-link-red--visited--active: var( --color-destructive--visited--active );
	--accent-color-base: #36c;
	--border-color-input--hover: var( --border-color-interactive );
	--border-color-input-binary: var( --border-color-interactive );
	--border-color-input-binary--hover: var( --border-color-progressive--hover );
	--border-color-input-binary--active: var( --border-color-progressive--active );
	--border-color-input-binary--focus: var( --border-color-progressive--focus );
	--border-color-input-binary--checked: var( --border-color-progressive );
	--color-base--subtle: #54595d;
	--line-height-xxx-small: 1.4285714rem;
	--line-height-xx-small: 1.5714285rem;
}

body.wgl-theme-dark,
.skin-citizen [data-theme="dark"] {
	--color-base: #eaecf0;
	--color-base--hover: #f8f9fa;
	--color-emphasized: #f8f9fa;
	--color-subtle: #a2a9b1;
	--color-disabled: #54595d;
	--color-disabled-emphasized: #72777d;
	--color-inverted: #101418;
	--color-progressive: #88a3e8;
	--color-progressive--hover: #a6bbf5;
	--color-progressive--active: #b6d4fb;
	--color-destructive: #fd7865;
	--color-destructive--hover: #fea898;
	--color-destructive--active: #ffc8bd;
	--color-visited: #a799cd;
	--color-visited--hover: #c5b9dd;
	--color-visited--active: #d9d0e9;
	--color-destructive--visited: #c99391;
	--color-destructive--visited--hover: #dcb5b3;
	--color-destructive--visited--active: #e8cecd;
	--color-error: #fd7865;
	--color-error--hover: #fea898;
	--color-error--active: #ffc8bd;
	--color-warning: #ca982e;
	--color-success: #2cb491;
	--color-notice: #a2a9b1;
	--color-content-added: #80cdb3;
	--color-content-removed: #fd7865;
	--color-base--subtle: #a2a9b1;
	--box-shadow-color-base: #72777d;
	--box-shadow-color-progressive--focus: #6485d1;
	--box-shadow-color-progressive-selected: #88a3e8;
	--box-shadow-color-progressive-selected--hover: #a6bbf5;
	--box-shadow-color-progressive-selected--active: #b6d4fb;
	--box-shadow-color-destructive--focus: #6485d1;
	--box-shadow-color-inverted: #000;
	--box-shadow-color-alpha-base: rgba( 0, 0, 0, 0.87 );
	--mix-blend-mode-blend: screen;
	--background-color-base: #101418;
	--background-color-neutral: #27292d;
	--background-color-neutral-subtle: #202122;
	--background-color-interactive: #27292d;
	--background-color-interactive--hover: #404244;
	--background-color-interactive--active: #54595d;
	--background-color-interactive-subtle: #202122;
	--background-color-interactive-subtle--hover: #27292d;
	--background-color-interactive-subtle--active: #404244;
	--background-color-disabled: #404244;
	--background-color-disabled-subtle: #27292d;
	--background-color-inverted: #f8f9fa;
	--background-color-progressive--focus: #6485d1;
	--background-color-progressive-subtle: #1b223d;
	--background-color-progressive-subtle--hover: #233566;
	--background-color-progressive-subtle--active: #3056a9;
	--background-color-destructive--focus: #6485d1;
	--background-color-destructive-subtle: #3c1a13;
	--background-color-destructive-subtle--hover: #612419;
	--background-color-destructive-subtle--active: #9f3526;
	--background-color-error-subtle: #3c1a13;
	--background-color-error-subtle--hover: #612419;
	--background-color-error-subtle--active: #9f3526;
	--background-color-warning-subtle: #2d2212;
	--background-color-success-subtle: #132821;
	--background-color-notice-subtle: #27292d;
	--background-color-content-added: #233566;
	--background-color-content-removed: #453217;
	--background-color-backdrop-light: rgba( 0, 0, 0, 0.65 );
	--background-color-backdrop-dark: rgba( 255, 255, 255, 0.65 );
	--border-color-base: #72777d;
	--border-color-emphasized: #eaecf0;
	--border-color-subtle: #54595d;
	--border-color-muted: #404244;
	--border-color-interactive--hover: #a2a9b1;
	--border-color-interactive--active: #c8ccd1;
	--border-color-disabled: #54595d;
	--border-color-inverted: #101418;
	--border-color-progressive--hover: #88a3e8;
	--border-color-progressive--active: #a6bbf5;
	--border-color-progressive--focus: #6485d1;
	--border-color-destructive--hover: #fd7865;
	--border-color-destructive--active: #fea898;
	--border-color-destructive--focus: #6485d1;
	--border-color-error--hover: #fd7865;
	--border-color-error--active: #fea898;
	--border-color-warning--hover: #ca982e;
	--border-color-warning--active: #edb537;
	--border-color-content-added: #233566;
	--border-color-content-removed: #987027;
}

/* Citizen 皮肤图片反色兼容 */
.skin-citizen [data-theme="dark"] .skin-invert-image img,
.skin-citizen [data-theme="dark"] .skin-invert:not(.mw-echo-notificationsWrapper),
.skin-citizen [data-theme="dark"] .oo-ui-iconElement-icon:not(.oo-ui-image-progressive):not(.oo-ui-image-destructive):not(.oo-ui-checkboxInputWidget-checkIcon):not(.oo-ui-image-invert):not(.mw-no-invert),
.skin-citizen [data-theme="dark"] .oo-ui-indicatorElement-indicator {
	color-scheme: light;
	filter: invert(1) hue-rotate(180deg);
}

:root {
	--link-color: #0645ad;
	--link-color-active: #faa700;
	--custom-background-blue: #ccf;
	--custom-background-cyan: #cef;
	--custom-background-green: #cfc;
	--custom-background-gray: #d2d2d2;
	--custom-background-grey: var(--custom-background-gray);
	--custom-background-magenta: #fdf;
	--custom-background-orange: #fdb;
	--custom-background-purple: #ecf;
	--custom-background-red: #fcc;
	--custom-background-yellow: #ffc;
	--custom-border-blue: #36e;
	--custom-border-cyan: #9df;
	--custom-border-green: #5d5;
	--custom-border-gray: #bbb;
	--custom-border-grey: var(--custom-border-gray);
	--custom-border-magenta: #f9f;
	--custom-border-orange: #f90;
	--custom-border-purple: #96c;
	--custom-border-red: #e44;
	--custom-border-yellow: #fc3;
	--custom-closed-topic-neutral: #eef;
	--custom-closed-topic-no: #fee;
	--custom-closed-topic-yes: #efe;
	--custom-code-background: #f8f9fa;
	--custom-load-page-button-color: #fff8;
	--custom-main-page-background: #fcfcfc;
	--custom-main-page-border: var(--custom-border-gray);
	--custom-main-page-edition-subheader: #333;
	--custom-mcwiki-header-color: #bcd4f5;
	--custom-navbox-background: #fff;
	--custom-navbox-top: #ccc;
	--custom-navbox-middle: #ddd;
	--custom-navbox-thru: #eee;
	--custom-nbt-inherit-color: #e6e6fa;
	--custom-table-background: #f8f9fa;
	--custom-table-alternate-background: #f0f1f2;
	--custom-table-choice-always: #003600;
	--custom-table-choice-always-background: #80d080;
	--custom-table-choice-default: #fff;
	--custom-table-choice-in-off-background: #060;
	--custom-table-choice-in-on-background: #0c0;
	--custom-table-choice-na: #000;
	--custom-table-choice-na-background: #fff;
	--custom-table-choice-neutral: #634800;
	--custom-table-choice-neutral-background: #ffeb9c;
	--custom-table-choice-never: #3c0404;
	--custom-table-choice-never-background: #ff8080;
	--custom-table-choice-no: #840606;
	--custom-table-choice-no-background: #ffc7ce;
	--custom-table-choice-out-off-background: #900;
	--custom-table-choice-out-on-background: #f00;
	--custom-table-choice-partial: #665400;
	--custom-table-choice-partial-background: #ffd;
	--custom-table-choice-planned: #0131b7;
	--custom-table-choice-planned-background: #dfdfff;
	--custom-table-choice-rarely: #533400;
	--custom-table-choice-rarely-background: #fdce5e;
	--custom-table-choice-unknown: #222;
	--custom-table-choice-unknown-background: #ccc;
	--custom-table-choice-yes: #005600;
	--custom-table-choice-yes-background: #c6efce;
	--custom-table-header-background: #eaecf0;
	--custom-topic-30-days: #bbb;
	--custom-topic-7-days: #ddd;
}

.skin-citizen [data-theme="dark"] {
	--link-color: #90c0fe;
	--link-color-active: #faa700;
	--custom-background-blue: hsl(240, 25%, 12%);
	--custom-background-cyan: hsl(190, 25%, 12%);
	--custom-background-green: hsl(120, 25%, 12%);
	--custom-background-gray: hsl(0, 0%, 12%);
	--custom-background-grey: var(--custom-background-gray);
	--custom-background-magenta: hsl(310, 25%, 12%);
	--custom-background-orange: hsl(40, 25%, 12%);
	--custom-background-purple: hsl(260, 25%, 12%);
	--custom-background-red: hsl(0, 25%, 12%);
	--custom-background-yellow: hsl(60, 25%, 12%);
	--custom-border-blue: hsl(240, 15%, 36%);
	--custom-border-cyan: hsl(190, 15%, 36%);
	--custom-border-green: hsl(120, 15%, 36%);
	--custom-border-gray: hsl(0, 0%, 36%);
	--custom-border-grey: var(--custom-border-gray);
	--custom-border-magenta: hsl(310, 15%, 36%);
	--custom-border-orange: hsl(40, 15%, 36%);
	--custom-border-purple: hsl(260, 15%, 36%);
	--custom-border-red: hsl(0, 15%, 36%);
	--custom-border-yellow: hsl(60, 15%, 36%);
	--custom-closed-topic-neutral: #2a2a33;
	--custom-closed-topic-no: #332a2a;
	--custom-closed-topic-yes: #2a332a;
	--custom-code-background: #131313;
	--custom-load-page-button-color: #fff2;
	--custom-main-page-background: #202125;
	--custom-main-page-border: #2e2e2e;
	--custom-main-page-edition-subheader: #ddd;
	--custom-mcwiki-header-color: #2e4159;
	--custom-navbox-background: #131313;
	--custom-navbox-top: #363636;
	--custom-navbox-middle: #2d2d2d;
	--custom-navbox-thru: #202020;
	--custom-nbt-inherit-color: #404050;
	--custom-table-background: #131313;
	--custom-table-alternate-background: #202020;
	--custom-table-choice-always: #a0e37b;
	--custom-table-choice-always-background: #1c410c;
	--custom-table-choice-default: #ddd;
	--custom-table-choice-in-off-background: #030;
	--custom-table-choice-in-on-background: #060;
	--custom-table-choice-na: #fff;
	--custom-table-choice-na-background: #000;
	--custom-table-choice-neutral: #e2c789;
	--custom-table-choice-neutral-background: #4c3416;
	--custom-table-choice-never: #ffb29d;
	--custom-table-choice-never-background: #601a15;
	--custom-table-choice-no: #f2acae;
	--custom-table-choice-no-background: #432a2e;
	--custom-table-choice-out-off-background: #400;
	--custom-table-choice-out-on-background: #700;
	--custom-table-choice-partial: #cebe95;
	--custom-table-choice-partial-background: #362d21;
	--custom-table-choice-planned: #b9c1db;
	--custom-table-choice-planned-background: #2a2a4b;
	--custom-table-choice-rarely: #ede0b8;
	--custom-table-choice-rarely-background: #693a0c;
	--custom-table-choice-unknown: #ddd;
	--custom-table-choice-unknown-background: #444;
	--custom-table-choice-yes: #adf2ad;
	--custom-table-choice-yes-background: #384c3c;
	--custom-table-header-background: #363636;
	--custom-topic-30-days: #303030;
	--custom-topic-7-days: #242424;
}

/** Site stylings **/
body {
	text-autospace: normal;
	text-spacing-trim: normal;
}

/** Citizen 皮肤内容宽度优化 **/
.skin-citizen #content {
	max-width: 1500px !important;
	margin: 0 auto;
}
.skin-citizen .mw-parser-output {
	overflow: visible !important;
}

/** Main page stylings **/
@supports (flex-wrap: wrap) { 
	.edition-group {
		display: flex;
		flex-wrap: wrap;
	}
	.edition-group .edition-box {
		flex: 17.4em;
	}
}

/* 导航框 */
.navbox {
	background: var(--custom-navbox-background);
	border: 1px solid var(--custom-border-gray);
	margin: 1em auto 0;
	width: 100%;
}
.navbox table {
	background: var(--custom-navbox-background);
}
.navbox .navbox-top {
	background-color: var(--custom-navbox-top);
	padding: 0 3px;
	text-align: center;
}
.navbox .navbox-middle {
	background-color: var(--custom-navbox-middle);
	padding: 0 3px;
	text-align: center;
}
.navbox .navbox-thru {
	background-color: var(--custom-navbox-thru);
	padding: 0 3px;
	text-align: center;
}
.navbox th {
	background-color: var(--custom-navbox-thru);
	padding: 0 10px;
	white-space: nowrap;
	text-align: right;
}
.navbox td {
	width: 100%;
}

/* 像素图渲染 */
.pixel-image,
.invslot-item-image,
.sprite,
.mw-userlink::before img {
	image-rendering: pixelated !important;
	image-rendering: crisp-edges !important;
	-ms-interpolation-mode: nearest-neighbor;
}

/* 我的世界颜色代码 */
.format-0 { color: #000; --mcfont-shadow-color: #000; }
.format-1 { color: #0000A8; --mcfont-shadow-color: #00002A; }
.format-2 { color: #00A800; --mcfont-shadow-color: #002A00; }
.format-3 { color: #00A8A8; --mcfont-shadow-color: #002A2A; }
.format-4 { color: #A80000; --mcfont-shadow-color: #2A0000; }
.format-5 { color: #A800A8; --mcfont-shadow-color: #2A002A; }
.format-6 { color: #FBA800; --mcfont-shadow-color: #3E2A00; }
.format-7 { color: #A8A8A8; --mcfont-shadow-color: #2A2A2A; }
.format-8 { color: #545454; --mcfont-shadow-color: #151515; }
.format-9 { color: #5454FB; --mcfont-shadow-color: #15153E; }
.format-a { color: #54FB54; --mcfont-shadow-color: #153E15; }
.format-b { color: #54FBFB; --mcfont-shadow-color: #153E3E; }
.format-c { color: #FB5454; --mcfont-shadow-color: #3E1515; }
.format-d { color: #FB54FB; --mcfont-shadow-color: #3E153E; }
.format-e { color: #FBFB54; --mcfont-shadow-color: #3E3E15; }
.format-f, #minetip-tooltip { color: #FBFBFB; --mcfont-shadow-color: #3E3E3E; }
.format-g { color: #DDD605; --mcfont-shadow-color: #373501; }
.format-h { color: #E3D4D1; --mcfont-shadow-color: #383534; }
.format-i { color: #CECACA; --mcfont-shadow-color: #333232; }
.format-j { color: #443A3B; --mcfont-shadow-color: #110E0E; }
.format-l { font-weight: bold; letter-spacing: 0.125em; }
.format-m { text-decoration: line-through; }
.format-n { text-decoration: underline; }
.format-o { font-style: italic; }

.mcfont-shadow {
	text-shadow: 0.0625em 0.125em 0 var(--mcfont-shadow-color, transparent);
}

/* 提示框 */
#minetip-tooltip {
	position: fixed;
	top: 0; left: 0;
	background: rgba(16, 0, 16, 0.94);
	padding: 0.4em 0.6em;
	font-family: Minecraft, Unifont, sans-serif;
	font-size: 16px;
	white-space: nowrap;
	z-index: 9999;
	pointer-events: none;
	border: 2px solid #2D0A63;
}

/* 表格隔行变色 */
.alternaterows tr:nth-child(2n),
.infobox-rows tr:nth-child(2n) {
	background-color: var(--custom-table-alternate-background);
}

/* 树状结构 */
.treeview ul, .treeview li {
	margin: 0; padding: 0;
	list-style: none;
}
.treeview-identblock {
	padding-left: 13px;
	margin-left: 7px;
	border-left: 1px solid #636363;
}

/* 搜索、编辑框优化 */
.skin-citizen .cdx-text-input {
	min-width: 0 !important;
}
.skin-citizen #simpleSearch {
	border-radius: 6px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
	.skin-citizen #content {
		padding: 0 12px;
	}
	.outrex-home {
		grid-template-columns: 1fr !important;
	}
	.outrex-side {
		margin-top: 20px;
	}
}

/* ======================================
   OUTREX 主页布局（Citizen 专用）
   直接用你之前的 HTML 即可
   ====================================== */
.outrex-home {
	display: grid;
	grid-template-columns: 72fr 28fr;
	gap: 24px;
	margin-top: 12px;
}
.outrex-topcards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
.outrex-hero-card {
	background: var(--background-color-neutral-subtle);
	border-radius: 12px;
	padding: 20px;
	text-decoration: none !important;
	color: inherit !important;
	transition: 0.2s;
}
.outrex-hero-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.outrex-hero-title {
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 8px;
}
.outrex-hero-desc {
	font-size: 0.9rem;
	color: var(--color-subtle);
	margin-bottom: 6px;
}
.outrex-hero-meta {
	font-size: 0.8rem;
	color: var(--color-progressive);
}
.outrex-banner {
	background: #22c55e;
	color: #fff;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 20px;
	text-align: center;
}
.outrex-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}
.grid-item {
	background: var(--background-color-neutral-subtle);
	border-radius: 10px;
	padding: 16px 12px;
	text-align: center;
	text-decoration: none !important;
	color: inherit !important;
}
.grid-item img {
	display: block;
	margin: 0 auto 6px;
	width: 32px; height: 32px;
}
.outrex-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}
.outrex-article {
	background: var(--background-color-neutral-subtle);
	border-radius: 10px;
	padding: 16px;
}
.outrex-article-head {
	font-weight: bold;
	margin-bottom: 8px;
	font-size: 1rem;
}
.outrex-smallgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.outrex-smallgrid a {
	background: var(--background-color-neutral-subtle);
	padding: 10px;
	text-align: center;
	border-radius: 8px;
	text-decoration: none !important;
	color: inherit !important;
}
.outrex-card {
	background: var(--background-color-neutral-subtle);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
}
.outrex-card-head {
	font-weight: bold;
	margin-bottom: 12px;
	font-size: 1rem;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border-color-subtle);
}
.outrex-logo-wrap img {
	max-width: 180px;
	margin-bottom: 10px;
}
.outrex-join-btn {
	display: inline-block;
	background: var(--background-color-progressive);
	color: #fff !important;
	padding: 10px 16px;
	border-radius: 8px;
	text-align: center;
	width: 100%;
	font-weight: bold;
	text-decoration: none !important;
}
.outrex-socials {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 8px;
}
.outrex-socials a {
	background: var(--background-color-interactive);
	padding: 8px;
	text-align: center;
	border-radius: 6px;
	text-decoration: none !important;
	color: inherit !important;
}
.outrex-list {
	padding-left: 1.2em;
	margin: 0;
}
.outrex-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	text-align: center;
}
.outrex-stat-num {
	font-size: 1.4rem;
	font-weight: bold;
}
.outrex-stat-label {
	font-size: 0.8rem;
	color: var(--color-subtle);
}