MediaWiki:Common.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* 这里放置的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);
}