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