MediaWiki:Common.css：修订间差异

2026年10月1日 (四) 02:35的最新版本

/* 这里放置的CSS将应用于所有皮肤 */
/* 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; /* The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes. */
	--color-progressive: #36c; /* 'Progressive' Color and states */
	--color-progressive--hover: #3056a9;
	--color-progressive--active: #233566;
	--color-progressive--focus: #36c;
	--color-destructive: #bf3c2c; /* 'Destructive' Color and states */
	--color-destructive--hover: #9f3526;
	--color-destructive--active: #612419;
	--color-destructive--focus: #36c;
	--color-visited: #6a60b0; /* 'Visited' color. In combination with progressive. Used for default links. */
	--color-visited--hover: #534fa3;
	--color-visited--active: #353262;
	--color-destructive--visited: #9f5555; /* Red link 'Visited' color. Used for visited red links. */
	--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; /* `x` stands for extra. In this case extra small. */
	--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; /* `x` stands for extra. In this case extra small. */
	--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; /* Intended for user-generated content that comes from outside of the design system. Components and features should use the standard font-size and line-height tokens instead. */
	--mix-blend-mode-base: normal;
	--mix-blend-mode-blend: multiply;
	--background-color-base: #fff; /* Background Colors for static elements (for page layout, sections, etc.) from here on. */
	--background-color-base-fixed: #fff; /* The same as background-color-base in light mode, but does not change in dark mode. Use this for things that should be white in both modes. */
	--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; /* Components like Buttons, Checkboxes, Radios, ProgressBars…. */
	--background-color-disabled-subtle: #eaecf0; /* Components like TextInputs, Selects…. */
	--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 ); /* Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. */
	--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; /* The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes. */
	--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; /* Use in places where no more customized focus styles are provided, for example on generic `:focus`. */
	--color-link: var( --color-progressive ); /* Default Link color and states */
	--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 ); /* Red ('new') Link color and states */
	--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 );
	
	/* DEPRECATED TOKENS */
	/* Warning: the following token name is deprecated (Use `color-subtle` instead. Note, that `color-subtle` is using `color.gray600` instead of `color.gray500` now.) */
	--color-base--subtle: #54595d;
	/* Warning: the following token name is deprecated (Use `line-height-x-small` instead. Deprecated, part of old font-size/line-height system) */
	--line-height-xxx-small: 1.4285714rem;
	/* Warning: the following token name is deprecated (Use `line-height-small` instead. Deprecated, part of old font-size/line-height system) */
	--line-height-xx-small: 1.5714285rem;
}

/* Codex Design tokens dark mode */
body.wgl-theme-dark,
.skin-vector .mw-notification {
	--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; /* 'Progressive' Color and states */
	--color-progressive--hover: #a6bbf5;
	--color-progressive--active: #b6d4fb;
	--color-destructive: #fd7865; /* 'Destructive' Color and states */
	--color-destructive--hover: #fea898;
	--color-destructive--active: #ffc8bd;
	--color-visited: #a799cd; /* 'Visited' color. In combination with progressive. Used for default links. */
	--color-visited--hover: #c5b9dd;
	--color-visited--active: #d9d0e9;
	--color-destructive--visited: #c99391; /* Red link 'Visited' color. Used for visited red links. */
	--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 Colors for static elements (for page layout, sections, etc.) from here on. */
	--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; /* Components like Buttons, Checkboxes, Radios, ProgressBars…. */
	--background-color-disabled-subtle: #27292d; /* Components like TextInputs, Selects…. */
	--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 ); /* Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. */
	--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;
}

body.wgl-theme-dark .skin-invert-image img,
body.wgl-theme-dark .skin-invert:not(.mw-echo-notificationsWrapper),
body.wgl-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),
body.wgl-theme-dark .oo-ui-indicatorElement-indicator {
	color-scheme: light;
	filter: invert(1) hue-rotate(180deg);
}

/* Defaults assume a namespace without a custom theme, and light theme. */
: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;
}

body.wgl-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 **/
/* Set text spaces */
body {
	text-autospace: normal;
	text-spacing-trim: normal;
}

/* Styling for tooltip */
.explain {
	border-bottom: 0;
	text-decoration: underline dotted;
	cursor: help;
}

.explain.noline {
	text-decoration: none;
}

/* Show help cursor when an abbr element has a title attribute */
abbr[title] {
	cursor: help;
}

body.mediawiki a > code {
	color: inherit;
}

kbd {
	text-align: center;
	font-size: 80%;
	font-family: inherit;
	font-weight: 500;
	border: 1px solid;
	border-radius: 2px;
	padding: 0.1em 0.4em;
	-webkit-box-decoration-break: clone;
	-o-box-decoration-break: clone;
	box-decoration-break: clone;
}
kbd {
	text-shadow: 0 1px 0 var(--background-color-base);
	background-color: var(--background-color-neutral-subtle);
	color: var(--color-emphasized);
	box-shadow: 0 1px rgba(0,0,0,0.2), 0 0 0 2px var(--background-color-base) inset;
	border-color: var(--border-color-muted);
	font-size: smaller;
}

.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 table,
.navbox .table-wide {
	margin-left: -4px;
	margin-right: -2px;
}

.navbox table:first-child,
.navbox .table-wide:first-child {
	margin-top: -2px;
}

.navbox table:last-child,
.navbox .table-wide:last-child {
	margin-bottom: -2px;
}

.navbox .table-wide {
	clear: none;
}

.navbox .navbox-top {
	white-space: nowrap;
	background-color: var(--custom-navbox-top);
	padding: 0 3px;
	text-align: center;
}

.navbox .navbox-middle {
	white-space: nowrap;
	background-color: var(--custom-navbox-middle);
	padding: 0 3px;
	text-align: center;
}

.navbox .navbox-thru {
	white-space: nowrap;
	background-color: var(--custom-navbox-thru);
	padding: 0 3px;
	text-align: center;
}

.navbox-navbar,
.navbox-navbar-mini {
	float: left;
	font-size: 80%;
	position: absolute;
}

.navbox-title {
	padding: 0 10px;
	font-size: 110%;
}

.navbox th {
	background-color: var(--custom-navbox-thru);
	padding: 0 10px;
	white-space: nowrap;
	text-align: right;
}

.navbox td {
	width: 100%;
	padding: 0 0 0 2px;
}

.navbox .table-wide::before {
	width: 0;
	height: 0;
	box-shadow: none;
}

.navbox .table-wide-inner,
.navbox .table-wide table {
	margin: 0;
}