diff --git a/KiwixWebApp-github.jsproj b/KiwixWebApp-github.jsproj
index c39bcc35..16822f5c 100644
--- a/KiwixWebApp-github.jsproj
+++ b/KiwixWebApp-github.jsproj
@@ -152,6 +152,7 @@
.css for such styles.
+ */
+ /**
+ * ###IMPORTANT:##
+ * If editing this file, please also edit the respective file in the MinervaNeue skin.
+ * ####
+ *
+ * This file is a LESS @import match for "mediawiki.skin.variables.less"
+ * when Vector 2022 is the active skin.
+ * Please note, that legacy Vector is handled by
+ * "mediawiki.less.legacy/mediawiki.skin.variables.less".
+ *
+ * Please also note, that both current Codex, design system for Wikimedia based skins,
+ * Vector 2022 and Minerva Neue are using the same variable values respectively in their
+ * repositories.
+ */
+ /* stylelint-disable @stylistic/indentation */
+ /**
+ * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
+ * The CSS variable values are imported in CSSCustomProperties.less.
+ */
+ /* stylelint-disable selector-class-pattern */
+ /* stylelint-disable selector-no-vendor-prefix */
+ /* stylelint-enable selector-no-vendor-prefix */
+ /**
+ * It's possible to add HTML elements inside wikitext, for example
+ * Editors have grown to expect that any floated elements added inside wikitext will be cleared
+ * automatically by the skin. This rule encapsulates that user expectation in a central place that
+ * applies to all skins.
+ * Note, this applies to mw-body-content not mw-parser-output as on pages such as the category page,
+ * the body of a page includes other sibling elements aside from the output of the parser.
+ */
+ .mw-body-content::after {
+ clear: both;
+ content: '';
+ display: block;
+ }
+ .mw-body-content a.external.free {
+ word-wrap: break-word;
+ }
+ .mw-body-content .error {
+ font-size: larger;
+ color: var(--color-error, #bf3c2c);
+ }
+ /* External URLs should always be treated as LTR (T6330) */
+ /* @noflip */
+ .rtl .mw-parser-output a.external.free,
+ .rtl .mw-parser-output a.external.autonumber {
+ direction: ltr;
+ unicode-bidi: embed;
+ }
+ /* body */
+ .mw-hide-empty-elt .mw-parser-output:not( .mw-show-empty-elt ) .mw-empty-elt {
+ display: none;
+ }
+
+ summary.section-heading {
+ display: list-item !important;
+ cursor: pointer;
+ }
+
+ /**
+ * wikitable class for skinning normal tables.
+ * Keep in sync with content.tables-print.less.
+ */
+ /* stylelint-disable selector-class-pattern */
+ /**
+ * ###IMPORTANT:##
+ * If editing this file, please also edit the respective file in the MinervaNeue skin.
+ * ####
+ *
+ * This file is a LESS @import match for "mediawiki.skin.variables.less"
+ * when Vector 2022 is the active skin.
+ * Please note, that legacy Vector is handled by
+ * "mediawiki.less.legacy/mediawiki.skin.variables.less".
+ *
+ * Please also note, that both current Codex, design system for Wikimedia based skins,
+ * Vector 2022 and Minerva Neue are using the same variable values respectively in their
+ * repositories.
+ */
+ /* stylelint-disable @stylistic/indentation */
+ /**
+ * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
+ * The CSS variable values are imported in CSSCustomProperties.less.
+ */
+ @media all and (max-width: calc(640px - 1px)) {
+ .mw-parser-output {
+ /**
+ * Disable the above behaviour when noresize is present.
+ * See mediawiki.skinning/interface for more information.
+ */
+ }
+ .mw-parser-output table {
+ display: block;
+ overflow: auto;
+ max-width: 100%;
+ }
+ .mw-parser-output .noresize table {
+ display: table;
+ }
+ }
+ .wikitable {
+ background-color: var(--background-color-neutral-subtle, #f8f9fa);
+ color: var(--color-base, #202122);
+ margin: 1em 0;
+ border: 1px solid var(--border-color-base, #a2a9b1);
+ border-collapse: collapse;
+ }
+ .wikitable > tr > th,
+ .wikitable > tr > td,
+ .wikitable > * > tr > th,
+ .wikitable > * > tr > td {
+ border: 1px solid var(--border-color-base, #a2a9b1);
+ padding: 0.2em 0.4em;
+ }
+ .wikitable > tr > th,
+ .wikitable > * > tr > th {
+ background-color: var(--background-color-neutral, #eaecf0);
+ color: var(--color-base, #202122);
+ text-align: center;
+ }
+ .wikitable > caption {
+ font-weight: bold;
+ }
+ @media all and (max-width: calc(640px - 1px)) {
+ body.skin--responsive .wikitable {
+ float: none;
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
+
+ /**
+ * ###IMPORTANT:##
+ * If editing this file, please also edit the respective file in the MinervaNeue skin.
+ * ####
+ *
+ * This file is a LESS @import match for "mediawiki.skin.variables.less"
+ * when Vector 2022 is the active skin.
+ * Please note, that legacy Vector is handled by
+ * "mediawiki.less.legacy/mediawiki.skin.variables.less".
+ *
+ * Please also note, that both current Codex, design system for Wikimedia based skins,
+ * Vector 2022 and Minerva Neue are using the same variable values respectively in their
+ * repositories.
+ */
+ /* stylelint-disable @stylistic/indentation */
+ /**
+ * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
+ * The CSS variable values are imported in CSSCustomProperties.less.
+ */
+ /* stylelint-disable selector-class-pattern */
+ #catlinks {
+ /**
+ * Overrides text justification (user preference)
+ * See T33990
+ */
+ text-align: left;
+ }
+ .catlinks {
+ background-color: var(--background-color-neutral-subtle, #f8f9fa);
+ margin-top: 1em;
+ border: 1px solid var(--border-color-base, #a2a9b1);
+ padding: 5px;
+ clear: both;
+ }
+ .catlinks ul {
+ display: inline;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+ .catlinks li {
+ display: inline-block;
+ line-height: 1.25em;
+ margin: 0.125em 0;
+ border-left: 1px solid var(--border-color-base, #a2a9b1);
+ padding: 0 0.5em;
+ /* (T7346) make category redirects italic */
+ }
+ .catlinks li:first-child {
+ border-left: 0;
+ padding-left: 0.25em;
+ }
+ .catlinks li a.mw-redirect {
+ font-style: italic;
+ }
+ /**
+ * Hidden categories
+ */
+ .mw-hidden-cats-hidden,
+ .catlinks-allhidden {
+ display: none;
+ }
+
+ /**
+ * MediaWiki style sheet for common core styles on interfaces
+ *
+ * Styles for the Monobook/Vector pattern of laying out common interfaces.
+ * These ids/classes are not built into the system,
+ * they are outputted by the actual MonoBook/Vector code by convention.
+ */
+ /* stylelint-disable selector-class-pattern */
+ /**
+ * Hide empty portlets. Controlled by mw.util.(show|hide)Portlet.
+ *
+ * Note: Historically this class was provided by the skins themselves but in
+ * I2ba68122fd82a254a5ad0e45157f095508f6fa39 was moved into core to formalize
+ * the behaviour of hidden portlets.
+ */
+ .emptyPortlet {
+ display: none;
+ }
+ .printfooter,
+ .client-nojs #t-print {
+ display: none;
+ /* T167956 */
+ }
+ .noresize {
+ max-width: 100%;
+ overflow-x: auto;
+ }
+
+ /* stylelint-disable selector-class-pattern */
+ /* stylelint-disable selector-no-vendor-prefix */
+ /* stylelint-enable selector-no-vendor-prefix */
+ /**
+ * ###IMPORTANT:##
+ * If editing this file, please also edit the respective file in the MinervaNeue skin.
+ * ####
+ *
+ * This file is a LESS @import match for "mediawiki.skin.variables.less"
+ * when Vector 2022 is the active skin.
+ * Please note, that legacy Vector is handled by
+ * "mediawiki.less.legacy/mediawiki.skin.variables.less".
+ *
+ * Please also note, that both current Codex, design system for Wikimedia based skins,
+ * Vector 2022 and Minerva Neue are using the same variable values respectively in their
+ * repositories.
+ */
+ /* stylelint-disable @stylistic/indentation */
+ /**
+ * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
+ * The CSS variable values are imported in CSSCustomProperties.less.
+ */
+ .mw-editsection {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ }
+ /* Display editsection links smaller and next to headings */
+ .mw-editsection,
+ .mw-editsection-like {
+ font-size: small;
+ font-weight: normal;
+ margin-left: 1em;
+ margin-right: 0;
+ -webkit-margin-start: 1em;
+ -webkit-margin-end: 0;
+ /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+ margin-inline-start: 1em;
+ margin-inline-end: 0;
+ /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+ vertical-align: baseline;
+ /* Avoid affecting the height of the heading */
+ line-height: 0;
+ unicode-bidi: isolate;
+ }
+ .mw-editsection a,
+ .mw-editsection-like a {
+ white-space: nowrap;
+ }
+ .mw-editsection::before,
+ .mw-editsection-like::before {
+ /* T253601 */
+ content: '\200B';
+ }
+ .mw-editsection-bracket,
+ .mw-editsection-divider {
+ color: var(--color-subtle, #54595d);
+ }
+
+ /**
+ * ###IMPORTANT:##
+ * If editing this file, please also edit the respective file in the MinervaNeue skin.
+ * ####
+ *
+ * This file is a LESS @import match for "mediawiki.skin.variables.less"
+ * when Vector 2022 is the active skin.
+ * Please note, that legacy Vector is handled by
+ * "mediawiki.less.legacy/mediawiki.skin.variables.less".
+ *
+ * Please also note, that both current Codex, design system for Wikimedia based skins,
+ * Vector 2022 and Minerva Neue are using the same variable values respectively in their
+ * repositories.
+ */
+ /* stylelint-disable @stylistic/indentation */
+ /**
+ * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
+ * The CSS variable values are imported in CSSCustomProperties.less.
+ */
+ /* stylelint-disable-next-line selector-class-pattern */
+ .usermessage {
+ background-color: var(--background-color-warning-subtle, #fdf2d5);
+ border: 1px solid var(--border-color-warning, #ab7f2a);
+ color: var(--color-emphasized, #101418);
+ font-weight: bold;
+ margin: 2em 0 1em;
+ padding: 0.5em 1em;
+ vertical-align: middle;
+ }
+
+ /**
+ * MediaWiki style sheet for general styles on basic content elements.
+ * IMPORTANT: All rules in this file should only apply to __tag__ selectors (T255717).
+ * Styling of non-tag selectors is permitted for backwards compatibility, in only two cases:
+ * 1) There is an equivalent tag with the same name in HTML4 (e.g. `.small and )
+ * 2) A class matches a tag name and is prefixed with `mw-` e.g. `code` and `.mw-code`
+ *
+ * Styles for basic elements: links, headings, lists, ….
+ *
+ * This style sheet is used by the Monobook and Vector skins.
+ */
+ /* stylelint-disable selector-class-pattern */
+ /* stylelint-disable selector-no-vendor-prefix */
+ /* stylelint-enable selector-no-vendor-prefix */
+ /**
+ * ###IMPORTANT:##
+ * If editing this file, please also edit the respective file in the MinervaNeue skin.
+ * ####
+ *
+ * This file is a LESS @import match for "mediawiki.skin.variables.less"
+ * when Vector 2022 is the active skin.
+ * Please note, that legacy Vector is handled by
+ * "mediawiki.less.legacy/mediawiki.skin.variables.less".
+ *
+ * Please also note, that both current Codex, design system for Wikimedia based skins,
+ * Vector 2022 and Minerva Neue are using the same variable values respectively in their
+ * repositories.
+ */
+ /* stylelint-disable @stylistic/indentation */
+ /**
+ * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
+ * The CSS variable values are imported in CSSCustomProperties.less.
+ */
+ /* stylelint-disable selector-class-pattern */
+ /* Links */
+ a {
+ text-decoration: none;
+ color: #0645ad;
+ background: none;
+ }
+ a:not( [ href ] ) {
+ cursor: pointer;
+ /* Always cursor:pointer even without href */
+ }
+ a:visited {
+ color: #0b0080;
+ }
+ a:active {
+ color: #faa700;
+ }
+ a:hover,
+ a:focus {
+ text-decoration: underline;
+ }
+ /* Inline Elements */
+ img {
+ border: 0;
+ /* FIXME: Remove after adding 'normalize.less' added to all 'elements.less' calling skins. */
+ vertical-align: middle;
+ }
+ hr {
+ height: 1px;
+ background-color: var(--border-color-base, #a2a9b1);
+ border: 0;
+ margin: 0.2em 0;
+ }
+ /* Structural Elements */
+ .mw-heading,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--color-emphasized, #101418);
+ font-weight: bold;
+ margin: 0;
+ padding-top: 0.5em;
+ padding-bottom: 0.17em;
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+ display: flow-root;
+ word-break: break-word;
+ }
+ .mw-heading1,
+ h1,
+ .mw-heading2,
+ h2 {
+ margin-bottom: 0.6em;
+ border-bottom: 1px solid var(--border-color-base, #a2a9b1);
+ }
+ .mw-heading3,
+ h3,
+ .mw-heading4,
+ h4,
+ .mw-heading5,
+ h5 {
+ margin-bottom: 0.3em;
+ }
+ .mw-heading1,
+ h1 {
+ font-size: 188%;
+ font-weight: normal;
+ }
+ .mw-heading2,
+ h2 {
+ font-size: 150%;
+ font-weight: normal;
+ }
+ .mw-heading3,
+ h3 {
+ font-size: 128%;
+ }
+ .mw-heading4,
+ h4 {
+ font-size: 116%;
+ }
+ .mw-heading5,
+ h5 {
+ font-size: 108%;
+ }
+ .mw-heading6,
+ h6 {
+ font-size: 100%;
+ }
+ .mw-heading h1,
+ .mw-heading h2,
+ .mw-heading h3,
+ .mw-heading h4,
+ .mw-heading h5,
+ .mw-heading h6 {
+ display: inline;
+ border: 0;
+ margin: 0;
+ padding: 0;
+ color: inherit;
+ font: inherit;
+ }
+ p {
+ margin: 0.4em 0 0.5em 0;
+ }
+ p img {
+ margin: 0;
+ }
+ ul {
+ margin-top: 0.3em;
+ margin-bottom: 0;
+ margin-left: 1.6em;
+ margin-right: 0;
+ -webkit-margin-start: 1.6em;
+ -webkit-margin-end: 0;
+ /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+ margin-inline-start: 1.6em;
+ margin-inline-end: 0;
+ /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+ padding: 0;
+ }
+ ol {
+ margin-top: 0.3em;
+ margin-bottom: 0;
+ margin-left: 3.2em;
+ margin-right: 0;
+ -webkit-margin-start: 3.2em;
+ -webkit-margin-end: 0;
+ /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+ margin-inline-start: 3.2em;
+ margin-inline-end: 0;
+ /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+ padding: 0;
+ list-style-image: none;
+ }
+ dd {
+ margin-bottom: 0.1em;
+ margin-left: 1.6em;
+ margin-right: 0;
+ -webkit-margin-start: 1.6em;
+ -webkit-margin-end: 0;
+ /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+ margin-inline-start: 1.6em;
+ margin-inline-end: 0;
+ /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+ }
+ li {
+ margin-bottom: 0.1em;
+ }
+ dt {
+ font-weight: bold;
+ margin-bottom: 0.1em;
+ }
+ dl {
+ margin-top: 0.2em;
+ margin-bottom: 0.5em;
+ }
+ /* FIXME: Duplicated ruleset if skins using ResourceLoaderSkinModule
+ load the features `normalize` and `elements`. */
+ pre,
+ code,
+ tt,
+ kbd,
+ samp,
+ .mw-code {
+ /* Support: Blink, Gecko, Webkit; enable unified font sizes for monospace font. T176636 */
+ font-family: monospace, monospace;
+ }
+ pre,
+ code,
+ .mw-code {
+ background-color: var(--background-color-neutral-subtle, #f8f9fa);
+ color: var(--color-emphasized, #101418);
+ border: 1px solid var(--border-color-muted, #dadde3);
+ }
+ code {
+ border-radius: 2px;
+ padding: 1px 4px;
+ }
+ pre,
+ .mw-code {
+ padding: 1em;
+ /* Wrap lines in overflow. T2260, T103780 */
+ white-space: pre-wrap;
+ /* Create a new block formatting context */
+ overflow-x: hidden;
+ /* Break really long words when they overflow to the next line */
+ word-wrap: break-word;
+ }
+ /* Tables */
+ table {
+ font-size: 100%;
+ }
+ /* Forms */
+ fieldset {
+ border: 1px solid #2a4b8d;
+ margin: 1em 0 1em 0;
+ padding: 0 1em 1em;
+ }
+ legend {
+ padding: 0.5em;
+ }
+ form {
+ border: 0;
+ margin: 0;
+ }
+ textarea {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ /* Support: Firefox */
+ /* Border rule required to override system appearance on Linux. T13641. */
+ border: 1px solid var(--border-color-base, #a2a9b1);
+ padding: 0.1em;
+ }
+ /* Emulate Center */
+ .center {
+ width: 100%;
+ text-align: center;
+ }
+ *.center * {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ /* Small for tables and similar */
+ .small {
+ font-size: 94%;
+ }
+ table.small {
+ font-size: 100%;
+ }
+
+ /* Taken from https://www.w3.org/TR/predefined-counter-styles/#meetei-styles */
+ /* Not supported by all browsers */
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+ @counter-style meetei {
+ system: numeric;
+ symbols: '\ABF0' '\ABF1' '\ABF2' '\ABF3' '\ABF4' '\ABF5' '\ABF6' '\ABF7' '\ABF8' '\ABF9';
+ suffix: ') ';
+ }
+
+ /* Taken from https://www.w3.org/TR/predefined-counter-styles/#ol-chiki-styles */
+ /* Not supported by all browsers */
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+ @counter-style santali {
+ system: numeric;
+ symbols: '\1C50' '\1C51' '\1C52' '\1C53' '\1C54' '\1C55' '\1C56' '\1C57' '\1C58' '\1C59';
+ }
+
+ /* Taken from https://www.w3.org/TR/predefined-counter-styles/#myanmar-styles */
+ /* Not supported by all browsers */
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+ @counter-style myanmar_with_period {
+ system: numeric;
+ symbols: '\1040' '\1041' '\1042' '\1043' '\1044' '\1045' '\1046' '\1047' '\1048' '\1049';
+ suffix: '\104B\0020';
+ }
+
+ /* Localised ordered list numbering for some languages */
+ ol:lang( azb ) li,
+ ol:lang( bcc ) li,
+ ol:lang( bgn ) li,
+ ol:lang( bqi ) li,
+ ol:lang( fa ) li,
+ ol:lang( glk ) li,
+ ol:lang( kk-arab ) li,
+ ol:lang( lrc ) li,
+ ol:lang( luz ) li,
+ ol:lang( mzn ) li {
+ list-style-type: persian;
+ }
+ ol:lang( ckb ) li,
+ ol:lang( sdh ) li {
+ list-style-type: arabic-indic;
+ }
+ ol:lang( hi ) li,
+ ol:lang( mai ) li,
+ ol:lang( mr ) li,
+ ol:lang( ne ) li {
+ list-style-type: devanagari;
+ }
+ ol:lang( as ) li,
+ ol:lang( bn ) li {
+ list-style-type: bengali;
+ }
+ ol:lang( mni ) li {
+ list-style-type: meetei;
+ }
+ ol:lang( or ) li {
+ list-style-type: oriya;
+ }
+ ol:lang( sat ) li {
+ list-style-type: santali;
+ }
+ ol:lang( blk ) li,
+ ol:lang( kjp ) li,
+ ol:lang( ksw ) li,
+ ol:lang( mnw ) li,
+ ol:lang( my ) li,
+ ol:lang( shn ) li {
+ list-style-type: myanmar_with_period;
+ }
+
+ /*
+ * ### Language specific height correction for titles.###
+ * Ref T31405 and T32809.
+ *
+ * NOTE: THIS FILE SHOULD ONLY INCLUDE LANGUAGES WRITTEN IN BRAHMIC SCRIPTS. If adding a language that
+ * uses a different script, it should be discussed and this comment should be expanded.
+ * In these scripts, the writing systems require slightly more vertical space to show diacritics properly
+ * as by default will be truncated by line-height.
+ */
+ .mw-heading1:lang( anp ),
+ .mw-heading1:lang( as ),
+ .mw-heading1:lang( awa ),
+ .mw-heading1:lang( bgc ),
+ .mw-heading1:lang( bh ),
+ .mw-heading1:lang( bho ),
+ .mw-heading1:lang( blk ),
+ .mw-heading1:lang( bn ),
+ .mw-heading1:lang( bo ),
+ .mw-heading1:lang( bpy ),
+ .mw-heading1:lang( ccp ),
+ .mw-heading1:lang( dty ),
+ .mw-heading1:lang( dz ),
+ .mw-heading1:lang( gom ),
+ .mw-heading1:lang( gu ),
+ .mw-heading1:lang( hi ),
+ .mw-heading1:lang( kjp ),
+ .mw-heading1:lang( km ),
+ .mw-heading1:lang( kn ),
+ .mw-heading1:lang( ks ),
+ .mw-heading1:lang( ksw ),
+ .mw-heading1:lang( mag ),
+ .mw-heading1:lang( mai ),
+ .mw-heading1:lang( ml ),
+ .mw-heading1:lang( mnw ),
+ .mw-heading1:lang( mr ),
+ .mw-heading1:lang( my ),
+ .mw-heading1:lang( new ),
+ .mw-heading1:lang( nit ),
+ .mw-heading1:lang( nod ),
+ .mw-heading1:lang( or ),
+ .mw-heading1:lang( pa ),
+ .mw-heading1:lang( pi ),
+ .mw-heading1:lang( rki ),
+ .mw-heading1:lang( sa ),
+ .mw-heading1:lang( shn ),
+ .mw-heading1:lang( si ),
+ .mw-heading1:lang( syl ),
+ .mw-heading1:lang( ta ),
+ .mw-heading1:lang( tcy ),
+ .mw-heading1:lang( tdd ),
+ .mw-heading1:lang( te ),
+ h1:lang( anp ),
+ h1:lang( as ),
+ h1:lang( awa ),
+ h1:lang( bgc ),
+ h1:lang( bh ),
+ h1:lang( bho ),
+ h1:lang( blk ),
+ h1:lang( bn ),
+ h1:lang( bo ),
+ h1:lang( bpy ),
+ h1:lang( ccp ),
+ h1:lang( dty ),
+ h1:lang( dz ),
+ h1:lang( gom ),
+ h1:lang( gu ),
+ h1:lang( hi ),
+ h1:lang( kjp ),
+ h1:lang( km ),
+ h1:lang( kn ),
+ h1:lang( ks ),
+ h1:lang( ksw ),
+ h1:lang( mag ),
+ h1:lang( mai ),
+ h1:lang( ml ),
+ h1:lang( mnw ),
+ h1:lang( mr ),
+ h1:lang( my ),
+ h1:lang( new ),
+ h1:lang( nit ),
+ h1:lang( nod ),
+ h1:lang( or ),
+ h1:lang( pa ),
+ h1:lang( pi ),
+ h1:lang( rki ),
+ h1:lang( sa ),
+ h1:lang( shn ),
+ h1:lang( si ),
+ h1:lang( syl ),
+ h1:lang( ta ),
+ h1:lang( tcy ),
+ h1:lang( tdd ),
+ h1:lang( te ) {
+ line-height: 1.6em !important;
+ /* stylelint-disable-line declaration-no-important */
+ }
+ .mw-heading:lang( anp ),
+ .mw-heading:lang( as ),
+ .mw-heading:lang( awa ),
+ .mw-heading:lang( bgc ),
+ .mw-heading:lang( bh ),
+ .mw-heading:lang( bho ),
+ .mw-heading:lang( blk ),
+ .mw-heading:lang( bn ),
+ .mw-heading:lang( bo ),
+ .mw-heading:lang( bpy ),
+ .mw-heading:lang( ccp ),
+ .mw-heading:lang( dty ),
+ .mw-heading:lang( dz ),
+ .mw-heading:lang( gom ),
+ .mw-heading:lang( gu ),
+ .mw-heading:lang( hi ),
+ .mw-heading:lang( kjp ),
+ .mw-heading:lang( km ),
+ .mw-heading:lang( kn ),
+ .mw-heading:lang( ks ),
+ .mw-heading:lang( ksw ),
+ .mw-heading:lang( mag ),
+ .mw-heading:lang( mai ),
+ .mw-heading:lang( ml ),
+ .mw-heading:lang( mnw ),
+ .mw-heading:lang( mr ),
+ .mw-heading:lang( my ),
+ .mw-heading:lang( new ),
+ .mw-heading:lang( nit ),
+ .mw-heading:lang( nod ),
+ .mw-heading:lang( or ),
+ .mw-heading:lang( pa ),
+ .mw-heading:lang( pi ),
+ .mw-heading:lang( rki ),
+ .mw-heading:lang( sa ),
+ .mw-heading:lang( shn ),
+ .mw-heading:lang( si ),
+ .mw-heading:lang( syl ),
+ .mw-heading:lang( ta ),
+ .mw-heading:lang( tcy ),
+ .mw-heading:lang( tdd ),
+ .mw-heading:lang( te ),
+ h2:lang( anp ),
+ h2:lang( as ),
+ h2:lang( awa ),
+ h2:lang( bgc ),
+ h2:lang( bh ),
+ h2:lang( bho ),
+ h2:lang( blk ),
+ h2:lang( bn ),
+ h2:lang( bo ),
+ h2:lang( bpy ),
+ h2:lang( ccp ),
+ h2:lang( dty ),
+ h2:lang( dz ),
+ h2:lang( gom ),
+ h2:lang( gu ),
+ h2:lang( hi ),
+ h2:lang( kjp ),
+ h2:lang( km ),
+ h2:lang( kn ),
+ h2:lang( ks ),
+ h2:lang( ksw ),
+ h2:lang( mag ),
+ h2:lang( mai ),
+ h2:lang( ml ),
+ h2:lang( mnw ),
+ h2:lang( mr ),
+ h2:lang( my ),
+ h2:lang( new ),
+ h2:lang( nit ),
+ h2:lang( nod ),
+ h2:lang( or ),
+ h2:lang( pa ),
+ h2:lang( pi ),
+ h2:lang( rki ),
+ h2:lang( sa ),
+ h2:lang( shn ),
+ h2:lang( si ),
+ h2:lang( syl ),
+ h2:lang( ta ),
+ h2:lang( tcy ),
+ h2:lang( tdd ),
+ h2:lang( te ),
+ h3:lang( anp ),
+ h3:lang( as ),
+ h3:lang( awa ),
+ h3:lang( bgc ),
+ h3:lang( bh ),
+ h3:lang( bho ),
+ h3:lang( blk ),
+ h3:lang( bn ),
+ h3:lang( bo ),
+ h3:lang( bpy ),
+ h3:lang( ccp ),
+ h3:lang( dty ),
+ h3:lang( dz ),
+ h3:lang( gom ),
+ h3:lang( gu ),
+ h3:lang( hi ),
+ h3:lang( kjp ),
+ h3:lang( km ),
+ h3:lang( kn ),
+ h3:lang( ks ),
+ h3:lang( ksw ),
+ h3:lang( mag ),
+ h3:lang( mai ),
+ h3:lang( ml ),
+ h3:lang( mnw ),
+ h3:lang( mr ),
+ h3:lang( my ),
+ h3:lang( new ),
+ h3:lang( nit ),
+ h3:lang( nod ),
+ h3:lang( or ),
+ h3:lang( pa ),
+ h3:lang( pi ),
+ h3:lang( rki ),
+ h3:lang( sa ),
+ h3:lang( shn ),
+ h3:lang( si ),
+ h3:lang( syl ),
+ h3:lang( ta ),
+ h3:lang( tcy ),
+ h3:lang( tdd ),
+ h3:lang( te ),
+ h4:lang( anp ),
+ h4:lang( as ),
+ h4:lang( awa ),
+ h4:lang( bgc ),
+ h4:lang( bh ),
+ h4:lang( bho ),
+ h4:lang( blk ),
+ h4:lang( bn ),
+ h4:lang( bo ),
+ h4:lang( bpy ),
+ h4:lang( ccp ),
+ h4:lang( dty ),
+ h4:lang( dz ),
+ h4:lang( gom ),
+ h4:lang( gu ),
+ h4:lang( hi ),
+ h4:lang( kjp ),
+ h4:lang( km ),
+ h4:lang( kn ),
+ h4:lang( ks ),
+ h4:lang( ksw ),
+ h4:lang( mag ),
+ h4:lang( mai ),
+ h4:lang( ml ),
+ h4:lang( mnw ),
+ h4:lang( mr ),
+ h4:lang( my ),
+ h4:lang( new ),
+ h4:lang( nit ),
+ h4:lang( nod ),
+ h4:lang( or ),
+ h4:lang( pa ),
+ h4:lang( pi ),
+ h4:lang( rki ),
+ h4:lang( sa ),
+ h4:lang( shn ),
+ h4:lang( si ),
+ h4:lang( syl ),
+ h4:lang( ta ),
+ h4:lang( tcy ),
+ h4:lang( tdd ),
+ h4:lang( te ),
+ h5:lang( anp ),
+ h5:lang( as ),
+ h5:lang( awa ),
+ h5:lang( bgc ),
+ h5:lang( bh ),
+ h5:lang( bho ),
+ h5:lang( blk ),
+ h5:lang( bn ),
+ h5:lang( bo ),
+ h5:lang( bpy ),
+ h5:lang( ccp ),
+ h5:lang( dty ),
+ h5:lang( dz ),
+ h5:lang( gom ),
+ h5:lang( gu ),
+ h5:lang( hi ),
+ h5:lang( kjp ),
+ h5:lang( km ),
+ h5:lang( kn ),
+ h5:lang( ks ),
+ h5:lang( ksw ),
+ h5:lang( mag ),
+ h5:lang( mai ),
+ h5:lang( ml ),
+ h5:lang( mnw ),
+ h5:lang( mr ),
+ h5:lang( my ),
+ h5:lang( new ),
+ h5:lang( nit ),
+ h5:lang( nod ),
+ h5:lang( or ),
+ h5:lang( pa ),
+ h5:lang( pi ),
+ h5:lang( rki ),
+ h5:lang( sa ),
+ h5:lang( shn ),
+ h5:lang( si ),
+ h5:lang( syl ),
+ h5:lang( ta ),
+ h5:lang( tcy ),
+ h5:lang( tdd ),
+ h5:lang( te ),
+ h6:lang( anp ),
+ h6:lang( as ),
+ h6:lang( awa ),
+ h6:lang( bgc ),
+ h6:lang( bh ),
+ h6:lang( bho ),
+ h6:lang( blk ),
+ h6:lang( bn ),
+ h6:lang( bo ),
+ h6:lang( bpy ),
+ h6:lang( ccp ),
+ h6:lang( dty ),
+ h6:lang( dz ),
+ h6:lang( gom ),
+ h6:lang( gu ),
+ h6:lang( hi ),
+ h6:lang( kjp ),
+ h6:lang( km ),
+ h6:lang( kn ),
+ h6:lang( ks ),
+ h6:lang( ksw ),
+ h6:lang( mag ),
+ h6:lang( mai ),
+ h6:lang( ml ),
+ h6:lang( mnw ),
+ h6:lang( mr ),
+ h6:lang( my ),
+ h6:lang( new ),
+ h6:lang( nit ),
+ h6:lang( nod ),
+ h6:lang( or ),
+ h6:lang( pa ),
+ h6:lang( pi ),
+ h6:lang( rki ),
+ h6:lang( sa ),
+ h6:lang( shn ),
+ h6:lang( si ),
+ h6:lang( syl ),
+ h6:lang( ta ),
+ h6:lang( tcy ),
+ h6:lang( tdd ),
+ h6:lang( te ) {
+ line-height: 1.4em;
+ }
+ .mw-heading1:lang( ne ),
+ h1:lang( ne ) {
+ line-height: 1.9;
+ }
+ .mw-heading2:lang( th ),
+ .mw-heading2:lang( ne ),
+ h2:lang( th ),
+ h2:lang( ne ) {
+ line-height: 1.6;
+ }}@media print {
+ /**
+ * ###IMPORTANT:##
+ * If editing this file, please also edit the respective file in the MinervaNeue skin.
+ * ####
+ *
+ * This file is a LESS @import match for "mediawiki.skin.variables.less"
+ * when Vector 2022 is the active skin.
+ * Please note, that legacy Vector is handled by
+ * "mediawiki.less.legacy/mediawiki.skin.variables.less".
+ *
+ * Please also note, that both current Codex, design system for Wikimedia based skins,
+ * Vector 2022 and Minerva Neue are using the same variable values respectively in their
+ * repositories.
+ */
+ /* stylelint-disable @stylistic/indentation */
+ /**
+ * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
+ * The CSS variable values are imported in CSSCustomProperties.less.
+ */
+ /* stylelint-disable selector-class-pattern */
+ table.floatright,
+ div.floatright,
+ table.floatleft,
+ div.floatleft {
+ border: 0;
+ }
+ div.thumb {
+ /* Pagination */
+ page-break-inside: avoid;
+ }
+ div.thumb a {
+ border-bottom: 0;
+ }
+ div.thumbinner {
+ background-color: #fff;
+ color: #666;
+ min-width: 100px;
+ border: 1pt solid #000;
+ border-radius: 2px;
+ font-size: 10pt;
+ }
+ .thumbborder {
+ border: 1pt solid #ddd;
+ }
+ .magnify {
+ display: none;
+ }
+
+ /**
+ * ###IMPORTANT:##
+ * If editing this file, please also edit the respective file in the MinervaNeue skin.
+ * ####
+ *
+ * This file is a LESS @import match for "mediawiki.skin.variables.less"
+ * when Vector 2022 is the active skin.
+ * Please note, that legacy Vector is handled by
+ * "mediawiki.less.legacy/mediawiki.skin.variables.less".
+ *
+ * Please also note, that both current Codex, design system for Wikimedia based skins,
+ * Vector 2022 and Minerva Neue are using the same variable values respectively in their
+ * repositories.
+ */
+ /* stylelint-disable @stylistic/indentation */
+ /**
+ * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
+ * The CSS variable values are imported in CSSCustomProperties.less.
+ */
+ figure[typeof~='mw:File/Thumb'],
+ figure[typeof~='mw:File/Frame'] {
+ border: 1pt;
+ border-bottom: 0;
+ background-color: #fff;
+ }
+ figure[typeof~='mw:File/Thumb'] > :not( figcaption ) .mw-file-element,
+ figure[typeof~='mw:File/Frame'] > :not( figcaption ) .mw-file-element {
+ border: 1pt solid #ddd;
+ }
+ figure[typeof~='mw:File/Thumb'] > figcaption,
+ figure[typeof~='mw:File/Frame'] > figcaption {
+ background-color: #fff;
+ color: #666;
+ font-size: 10pt;
+ border: 1pt;
+ border-top: 0;
+ }
+ .mw-image-border .mw-file-element {
+ border: 1pt;
+ }
+
+ /* stylelint-disable selector-class-pattern */
+ .mw-parser-output a.external {
+ /* Expand URLs for printing */
+ /* Expand protocol-relative URLs for printing */
+ }
+ .mw-parser-output a.external.text::after,
+ .mw-parser-output a.external.autonumber::after {
+ content: ' (' attr(href) ')';
+ word-break: break-all;
+ word-wrap: break-word;
+ }
+ .mw-parser-output a.external.text[href^='//']:after,
+ .mw-parser-output a.external.autonumber[href^='//']:after {
+ content: ' (https:' attr(href) ')';
+ }
+
+ /* stylelint-disable selector-class-pattern */
+ .wikitable {
+ background: #fff;
+ margin: 1em 0;
+ border: 1pt solid #aaa;
+ border-collapse: collapse;
+ font-size: 10pt;
+ /* Pagination */
+ page-break-inside: avoid;
+ }
+ .wikitable > caption {
+ padding: 5px;
+ font-size: 10pt;
+ }
+ .wikitable > tr > th,
+ .wikitable > tr > td,
+ .wikitable > * > tr > th,
+ .wikitable > * > tr > td {
+ /* Important is required to override any inline styles provided by editors */
+ background: #fff !important;
+ /* stylelint-disable-line declaration-no-important */
+ /* We need to also set color in case editors applied a light text color */
+ color: #000 !important;
+ /* stylelint-disable-line declaration-no-important */
+ border: 1pt solid #aaa;
+ padding: 0.4em 0.6em;
+ }
+ .wikitable > tr > th,
+ .wikitable > * > tr > th {
+ text-align: center;
+ }
+ table.listing,
+ table.listing td {
+ border: 1pt solid #000;
+ border-collapse: collapse;
+ }
+
+ /* stylelint-disable selector-class-pattern */
+ .catlinks ul {
+ display: inline;
+ padding: 0;
+ list-style: none;
+ }
+ .catlinks li {
+ display: inline-block;
+ line-height: 1.15;
+ margin: 0.1em 0;
+ border-left: 1pt solid #aaa;
+ padding: 0 0.4em;
+ }
+ .catlinks li:first-child {
+ border-left: 0;
+ padding-left: 0.2em;
+ }
+ .mw-hidden-catlinks,
+ .catlinks {
+ display: none;
+ }
+
+ /* stylelint-disable selector-class-pattern */
+ .mw-editsection,
+ .mw-editsection-like,
+ .mw-indicators,
+ #siteNotice,
+ .usermessage {
+ display: none;
+ }
+ .printfooter {
+ clear: both;
+ padding: 1em 0;
+ }
+
+ /* stylelint-disable selector-class-pattern */
+ .center {
+ text-align: center;
+ }
+ /* Links */
+ a {
+ background: none !important;
+ /* stylelint-disable-line declaration-no-important */
+ padding: 0 !important;
+ /* stylelint-disable-line declaration-no-important */
+ }
+ a,
+ a.external,
+ a.new,
+ a.stub {
+ color: inherit !important;
+ /* stylelint-disable-line declaration-no-important */
+ text-decoration: inherit !important;
+ /* stylelint-disable-line declaration-no-important */
+ }
+ dt {
+ font-weight: bold;
+ }
+ .mw-heading,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-weight: bold;
+ /* Pagination */
+ page-break-after: avoid;
+ }
+ p {
+ margin: 1em 0;
+ line-height: 1.2;
+ /* Pagination */
+ /* oprhans/widows not supported by Firefox */
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+ orphans: 3;
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+ widows: 3;
+ }
+ img,
+ figure {
+ /* Pagination */
+ page-break-inside: avoid;
+ }
+ img {
+ border: 0;
+ vertical-align: middle;
+ }
+ pre,
+ .mw-code {
+ background: #fff;
+ color: #000;
+ border: 1pt dashed #000;
+ padding: 1em;
+ font-size: 8pt;
+ white-space: pre-wrap;
+ /* Create a new block formatting context */
+ overflow-x: hidden;
+ /* Break really long words when they overflow to the next line */
+ word-wrap: break-word;
+ }
+ ul {
+ list-style-type: square;
+ }}/**
+ * ###IMPORTANT:##
+ * If editing this file, please also edit the respective file in the MinervaNeue skin.
+ * ####
+ *
+ * This file is a LESS @import match for "mediawiki.skin.variables.less"
+ * when Vector 2022 is the active skin.
+ * Please note, that legacy Vector is handled by
+ * "mediawiki.less.legacy/mediawiki.skin.variables.less".
+ *
+ * Please also note, that both current Codex, design system for Wikimedia based skins,
+ * Vector 2022 and Minerva Neue are using the same variable values respectively in their
+ * repositories.
+ */
+/* stylelint-disable @stylistic/indentation */
+/**
+ * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
+ * The CSS variable values are imported in CSSCustomProperties.less.
+ */
+/**
+ * Codex Design Tokens v2.0.0-rc.1
+ * Design System for Wikimedia
+ * See https://doc.wikimedia.org/codex/latest/design-tokens/overview.html
+ */
+/**
+ * Codex Design Tokens v2.0.0-rc.1
+ * Design System for Wikimedia
+ * See https://doc.wikimedia.org/codex/latest/design-tokens/overview.html
+ */
+/**
+ * T365764 - OOUI Icon classes for inverted dark-mode icons.
+ * This includes OOUI icons that are not colored (progressive/destructive), checkbox icons, and
+ * indicator widgets.
+ */
+@media screen {
+ /**
+ * Light mode
+ *
+ * Applies the light mode color palette by default
+ * or with the .skin-invert, or .notheme classes
+ */
+ :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;
+ --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: #f1f4fd;
+ --background-color-progressive-subtle--hover: #dce3f9;
+ --background-color-progressive-subtle--active: #cbd6f6;
+ --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-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-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-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;
+ }
+ /**
+ * Forced night mode.
+ *
+ * Applies the night mode color palette per the users explicit preference,
+ * regardless of system settings.
+ */
+ html.skin-theme-clientpref-night {
+ color-scheme: 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;
+ /* 'Progressive' Color and states */
+ --color-progressive--hover: #b0c1f0;
+ --color-progressive--active: #cbd6f6;
+ --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: #b0c1f0;
+ --box-shadow-color-progressive-selected--active: #cbd6f6;
+ --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-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: #b0c1f0;
+ --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-content-added: #233566;
+ --border-color-content-removed: #987027;
+ }
+ /**
+ * Inverted Dark-mode
+ * Creates a dark-mode effect on elements by flipping their color,
+ * (usually from black to white).
+ * Applied as a last resort when using CSS variables is not possible.
+ * NOTE: `.skin-invert` is used in templates and user generated content.
+ *
+ * - T365102 invert class specifically for image related element
+ * - T365764 special treatment of inverted OOUI icons
+ */
+ html.skin-theme-clientpref-night .skin-invert-image img,
+ html.skin-theme-clientpref-night .skin-invert,
+ html.skin-theme-clientpref-night .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 ),
+ html.skin-theme-clientpref-night .oo-ui-indicatorElement-indicator {
+ color-scheme: light;
+ filter: invert(1) hue-rotate(180deg);
+ }
+ /**
+ * Forced light mode.
+ * Makes elements appear in light-mode when dark-mode is enabled.
+ * NOTE: might be used in templates and user generated content.
+ */
+ html.skin-theme-clientpref-night .notheme {
+ color-scheme: light;
+ color: var(--color-base);
+ }
+ /**
+ * Prevent double inversion.
+ * Do not apply invert to elements that are inside a notheme or a skin-invert class to avoid inversion in light theme or
+ * double inversion in an already inverted element
+ * - OOUI icons inside .notheme OOUI elements
+ * - OOUI icons inside elements with .skin-invert
+ * - OOUI icons inside elements with .notheme
+ */
+ .skin-invert .oo-ui-indicatorElement-indicator,
+ .notheme .oo-ui-indicatorElement-indicator,
+ .skin-invert .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 ),
+ .notheme .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 ) {
+ filter: none !important;
+ /* stylelint-disable-line declaration-no-important */
+ }
+ /**
+ * Font size settings
+ *
+ * Notes:
+ * `.mw-body-content .cdx-message` selector:
+ * Temporary workaround to prevent Codex messages from scaling with text size T391890.
+ * Remove the workaround once font size modes are fully integrated in Vector.
+ *
+ * `.no-font-mode-scale` (@unstable) selector:
+ * Temporary and not be considered stable class, which is not designed for use in
+ * article content.
+ */
+ html.vector-feature-custom-font-size-clientpref--excluded,
+ .vector-feature-custom-font-size-clientpref--excluded,
+ html.vector-feature-custom-font-size-clientpref-0,
+ .no-font-mode-scale,
+ .mw-body-content .cdx-message {
+ --font-size-medium: var(--font-size-small, 0.875rem);
+ --line-height-medium: 1.5714285;
+ }
+ html.vector-feature-custom-font-size-clientpref-1 {
+ --font-size-medium: var(--font-size-medium, 1rem);
+ --line-height-medium: 1.6;
+ }
+ html.vector-feature-custom-font-size-clientpref-2 {
+ --font-size-medium: var(--font-size-x-large, 1.25rem);
+ --line-height-medium: 1.5;
+ }
+}
+/**
+ * Auto night mode.
+ *
+ * Applies the night mode color palette only in response to system settings.
+ */
+@media screen and (prefers-color-scheme: dark) {
+ html.skin-theme-clientpref-os {
+ color-scheme: light 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;
+ /* 'Progressive' Color and states */
+ --color-progressive--hover: #b0c1f0;
+ --color-progressive--active: #cbd6f6;
+ --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: #b0c1f0;
+ --box-shadow-color-progressive-selected--active: #cbd6f6;
+ --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-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: #b0c1f0;
+ --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-content-added: #233566;
+ --border-color-content-removed: #987027;
+ }
+ html.skin-theme-clientpref-os .notheme {
+ color-scheme: light;
+ color: var(--color-base);
+ }
+ html.skin-theme-clientpref-os .skin-invert-image img,
+ html.skin-theme-clientpref-os .skin-invert,
+ html.skin-theme-clientpref-os .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 ),
+ html.skin-theme-clientpref-os .oo-ui-indicatorElement-indicator {
+ color-scheme: light;
+ filter: invert(1) hue-rotate(180deg);
+ }
+}
+
+/**
+ * Vector modern stylesheets
+ * See '../common/common.less' for common screen and print Vector stylesheets.
+ */
+/**
+ * ###IMPORTANT:##
+ * If editing this file, please also edit the respective file in the MinervaNeue skin.
+ * ####
+ *
+ * This file is a LESS @import match for "mediawiki.skin.variables.less"
+ * when Vector 2022 is the active skin.
+ * Please note, that legacy Vector is handled by
+ * "mediawiki.less.legacy/mediawiki.skin.variables.less".
+ *
+ * Please also note, that both current Codex, design system for Wikimedia based skins,
+ * Vector 2022 and Minerva Neue are using the same variable values respectively in their
+ * repositories.
+ */
+/* stylelint-disable @stylistic/indentation */
+/**
+ * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
+ * The CSS variable values are imported in CSSCustomProperties.less.
+ */
+/* Use of minmax is important to restrict the maximum grid column width more information: T314756 */
+/**
+ * Less mixins.
+ */
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable selector-no-vendor-prefix */
+/* stylelint-enable selector-no-vendor-prefix */
+@media screen {
+ /**
+ * Vector modern layout styles for screen
+ *
+ * Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
+ * The rules here should only define the layout, not color or typography.
+ */
+ html {
+ scroll-padding-top: 75px;
+ }
+ body {
+ background-color: var(--background-color-neutral-subtle, #f8f9fa);
+ color: var(--color-base, #202122);
+ }
+ .mw-body,
+ .parsoid-body {
+ direction: ltr;
+ }
+ .mw-body .firstHeading {
+ word-wrap: break-word;
+ margin-bottom: 0;
+ }
+ .mw-header {
+ position: relative;
+ z-index: 3;
+ }
+ #mw-content-text {
+ margin-top: 16px;
+ }
+ /* Content */
+ .mw-indicators {
+ z-index: 1;
+ }
+ .vector-page-titlebar {
+ box-shadow: none;
+ }
+ .vector-page-titlebar::after {
+ clear: both;
+ content: '';
+ display: block;
+ }
+ .vector-page-titlebar::after {
+ content: '';
+ display: block;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background-color: var(--border-color-base, #a2a9b1);
+ }
+ .vector-page-titlebar-blank::after {
+ content: none;
+ }
+ .vector-body-before-content {
+ overflow: hidden;
+ }
+ .vector-body-before-content .mw-indicators {
+ margin-top: 8px;
+ }
+ .mw-body .mw-portlet-lang {
+ float: right;
+ }
+ .vector-body {
+ position: relative;
+ z-index: 0;
+ }
+ #siteSub {
+ margin-top: 8px;
+ }
+ #contentSub:not( :empty ),
+ #contentSub2 {
+ font-size: var(--font-size-small, 0.875rem);
+ color: var(--color-subtle, #54595d);
+ width: auto;
+ margin: 8px 0 0;
+ }
+ .mw-page-container {
+ min-width: 18.75em;
+ max-width: 99.75rem;
+ box-sizing: border-box;
+ position: relative;
+ z-index: 0;
+ margin: 0 auto;
+ padding-top: 0.05px;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ background-color: var(--background-color-base, #fff);
+ }
+ .vector-header-container {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ }
+ .vector-header-container .mw-header,
+ .vector-header-container .vector-sticky-header {
+ width: 100%;
+ min-height: 3.125rem;
+ background-color: var(--background-color-base, #fff);
+ min-width: 18.75em;
+ max-width: 99.75rem;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ box-sizing: border-box;
+ }
+ .vector-feature-limited-width-clientpref-0 .mw-page-container,
+ .vector-feature-limited-width-clientpref-0 .vector-sticky-header,
+ .vector-feature-limited-width-clientpref-0 .mw-header {
+ max-width: none;
+ }
+ .skin--responsive .mw-page-container {
+ min-width: auto;
+ }
+ html {
+ touch-action: manipulation;
+ }
+ .vector-feature-main-menu-pinned-disabled.vector-toc-not-available .mw-page-container-inner,
+ .vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-page-container-inner {
+ grid-template-columns: minmax(0, 1fr);
+ grid-template-areas: 'siteNotice' 'pageContent' 'columnStart' 'footer';
+ }
+ .vector-feature-main-menu-pinned-disabled.vector-toc-not-available .mw-page-container-inner .mw-body,
+ .vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-page-container-inner .mw-body {
+ justify-content: center;
+ }
+ .vector-column-start {
+ margin-left: -12px;
+ }
+ .vector-column-start .vector-main-menu-container {
+ margin-left: 12px;
+ }
+ .mixin-toc-below-page-title {
+ position: fixed;
+ top: 12px;
+ left: 12px;
+ margin: 0;
+ z-index: 50;
+ }
+ .client-nojs.vector-feature-toc-pinned-clientpref-0 .vector-page-titlebar-toc {
+ margin-right: 8px;
+ }
+ .client-nojs.vector-feature-toc-pinned-clientpref-0 .vector-page-titlebar-toc .vector-dropdown-content {
+ max-width: none;
+ }
+ .client-nojs.vector-feature-toc-pinned-clientpref-0 .vector-page-titlebar-toc .vector-toc {
+ width: max-content;
+ min-width: 200px;
+ max-width: min( 0.85 * 59.25rem, 75vw );
+ }
+ /*
+ * Normalize styles across rendering engines.
+ * Ideally, these rules should live in core and be shared across skins.
+ *
+ */
+ html,
+ body {
+ height: 100%;
+ }
+ :focus {
+ outline-color: var(--outline-color-progressive--focus, #36c);
+ }
+ /*
+ * Vector's common typography rules,
+ * including whitespace with `margin` & `padding` and list bullets
+ * as part of typographic styles. Iconography wouldn't belong here.
+ *
+ */
+ html {
+ font-size: 100%;
+ }
+ html,
+ body {
+ font-family: sans-serif;
+ }
+ ul {
+ list-style-type: disc;
+ }
+ pre,
+ .mw-code {
+ line-height: 1.3;
+ }
+ .mw-jump-link:not( :focus ) {
+ display: block;
+ position: absolute !important;
+ /* stylelint-disable-line declaration-no-important */
+ clip: rect(1px, 1px, 1px, 1px);
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ border: 0;
+ padding: 0;
+ overflow: hidden;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ }
+ /* Use unscoped selector to allow edit sections outside of .mw-body-content and .vector-body (T160269) */
+ .mw-editsection,
+ .mw-editsection-like {
+ font-family: sans-serif;
+ }
+ /* Main content area, including siteNotice, indicators, categories, firstHeading and `.vector-body`. */
+ .mw-body h1,
+ .mw-body .mw-heading1,
+ .mw-body-content h1,
+ .mw-body-content .mw-heading1,
+ .mw-body-content h2,
+ .mw-body-content .mw-heading2 {
+ font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
+ line-height: 1.375;
+ /* Burmese (Myanmar) language headlines would be cropped with set `line-height` */
+ /* See T193270 */
+ }
+ .mw-body h1:lang( ja ),
+ .mw-body .mw-heading1:lang( ja ),
+ .mw-body-content h1:lang( ja ),
+ .mw-body-content .mw-heading1:lang( ja ),
+ .mw-body-content h2:lang( ja ),
+ .mw-body-content .mw-heading2:lang( ja ),
+ .mw-body h1:lang( he ),
+ .mw-body .mw-heading1:lang( he ),
+ .mw-body-content h1:lang( he ),
+ .mw-body-content .mw-heading1:lang( he ),
+ .mw-body-content h2:lang( he ),
+ .mw-body-content .mw-heading2:lang( he ),
+ .mw-body h1:lang( ko ),
+ .mw-body .mw-heading1:lang( ko ),
+ .mw-body-content h1:lang( ko ),
+ .mw-body-content .mw-heading1:lang( ko ),
+ .mw-body-content h2:lang( ko ),
+ .mw-body-content .mw-heading2:lang( ko ) {
+ /* See T65827 */
+ font-family: sans-serif;
+ }
+ .mw-body h1:lang( ckb ),
+ .mw-body .mw-heading1:lang( ckb ),
+ .mw-body-content h1:lang( ckb ),
+ .mw-body-content .mw-heading1:lang( ckb ),
+ .mw-body-content h2:lang( ckb ),
+ .mw-body-content .mw-heading2:lang( ckb ) {
+ /* See T306317 */
+ font-family: 'Scheherazade', 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
+ }
+ .mw-body h1:lang( my ),
+ .mw-body .mw-heading1:lang( my ),
+ .mw-body-content h1:lang( my ),
+ .mw-body-content .mw-heading1:lang( my ),
+ .mw-body-content h2:lang( my ),
+ .mw-body-content .mw-heading2:lang( my ) {
+ line-height: normal;
+ }
+ .mw-body h1,
+ .mw-body .mw-heading1,
+ .mw-body-content h1,
+ .mw-body-content .mw-heading1 {
+ font-size: 1.8em;
+ }
+ .mw-body .mw-heading2,
+ .mw-body h2 {
+ font-size: 1.5em;
+ }
+ .mw-body .mw-heading3,
+ .mw-body h3,
+ .mw-body .mw-heading4,
+ .mw-body h4,
+ .mw-body .mw-heading5,
+ .mw-body h5,
+ .mw-body .mw-heading6,
+ .mw-body h6 {
+ padding-bottom: 0;
+ line-height: 1.6;
+ }
+ .mw-body .mw-heading2,
+ .mw-body h2,
+ .mw-body .mw-heading3,
+ .mw-body h3,
+ .mw-body .mw-heading4,
+ .mw-body h4,
+ .mw-body .mw-heading5,
+ .mw-body h5,
+ .mw-body .mw-heading6,
+ .mw-body h6 {
+ display: inline;
+ margin: 0.25em 0 0.25em 0;
+ }
+ .mw-body .mw-heading3,
+ .mw-body h3 {
+ font-size: 1.2em;
+ }
+ .mw-body .mw-heading3,
+ .mw-body h3,
+ .mw-body .mw-heading4,
+ .mw-body h4 {
+ font-weight: bold;
+ }
+ .mw-body .mw-heading4,
+ .mw-body h4,
+ .mw-body .mw-heading5,
+ .mw-body h5,
+ .mw-body .mw-heading6,
+ .mw-body h6 {
+ font-size: 100%;
+ }
+ .mw-body .mw-heading1 h1,
+ .mw-body .mw-heading2 h2,
+ .mw-body .mw-heading3 h3,
+ .mw-body .mw-heading4 h4,
+ .mw-body .mw-heading5 h5,
+ .mw-body .mw-heading6 h6 {
+ margin-top: 0;
+ font-size: inherit;
+ }
+ .mw-body p {
+ margin: 0.5em 0 1em 0;
+ }
+ .mw-body p + ul,
+ .mw-body p + ol,
+ .mw-body p + table,
+ .mw-body p + dl,
+ .mw-body p + blockquote {
+ margin-top: -0.5em;
+ }
+ .mw-body blockquote {
+ border-left: 4px solid var(--border-color-muted, #dadde3);
+ padding: 8px 32px;
+ }
+ .mw-body blockquote > :first-child {
+ margin-top: 0;
+ }
+ .mw-body blockquote > :last-child {
+ margin-bottom: 0;
+ }
+ #siteSub {
+ font-size: var(--font-size-small, 0.875rem);
+ display: none;
+ }
+ .vector-body {
+ font-size: var(--font-size-medium);
+ line-height: var(--line-height-medium);
+ }
+ /*
+ * This not does apply to links with role button per discussion on T373989
+ * The `where` it used here as specificity is important so support overriding
+ * in skins and extensions.
+ * When changing this file - DO NOT disable stylelint rule selector-max-specificity
+*/
+ a:where( :not( [ role='button' ] )) {
+ color: var(--color-progressive, #36c);
+ border-radius: 2px;
+ text-decoration: none;
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+ }
+ a:where( :not( [ role='button' ] )):visited {
+ color: var(--color-visited, #6a60b0);
+ }
+ a:where( :not( [ role='button' ] )):visited:hover {
+ color: var(--color-visited--hover, #534fa3);
+ }
+ a:where( :not( [ role='button' ] )):visited:active {
+ color: var(--color-visited--active, #353262);
+ }
+ a:where( :not( [ role='button' ] )):hover {
+ color: var(--color-progressive--hover, #3056a9);
+ text-decoration: underline;
+ }
+ a:where( :not( [ role='button' ] )):active {
+ color: var(--color-progressive--active, #233566);
+ text-decoration: underline;
+ }
+ a:where( :not( [ role='button' ] )):focus-visible {
+ outline: solid 2px var(--outline-color-progressive--focus, #36c);
+ }
+ @supports not selector( :focus-visible ) {
+ a:where( :not( [ role='button' ] )):focus {
+ outline: solid 2px var(--outline-color-progressive--focus, #36c);
+ }
+ }
+ a:where( :not( [ role='button' ] )) .cdx-icon:not( .cdx-thumbnail__placeholder__icon--vue ):last-child {
+ min-width: 10px;
+ min-height: 10px;
+ width: var(--font-size-medium, 1rem);
+ height: var(--font-size-medium, 1rem);
+ padding-left: 4px;
+ vertical-align: middle;
+ }
+ a:where( .new:not( [ role='button' ] )) {
+ color: var(--color-destructive, #bf3c2c);
+ }
+ a:where( .new:not( [ role='button' ] )):visited {
+ color: var(--color-destructive--visited, #9f5555);
+ }
+ a:where( .new:not( [ role='button' ] )):visited:hover {
+ color: var(--color-destructive--visited--hover, #854848);
+ }
+ a:where( .new:not( [ role='button' ] )):visited:active {
+ color: var(--color-destructive--visited--active, #512e2e);
+ }
+ a:where( .new:not( [ role='button' ] )):hover {
+ color: var(--color-destructive--hover, #9f3526);
+ text-decoration: underline;
+ }
+ a:where( .new:not( [ role='button' ] )):active {
+ color: var(--color-destructive--active, #612419);
+ text-decoration: underline;
+ }
+ a:where( .new:not( [ role='button' ] )):focus {
+ outline-color: var(--outline-color-progressive--focus, #36c);
+ }
+ /* stylelint-disable selector-max-specificity */
+ .mw-parser-output a {
+ word-wrap: break-word;
+ }
+ .mw-parser-output a.external {
+ background-image: url(link.ernal-small-ltr-progressive.svg);
+ background-position: center right;
+ background-repeat: no-repeat;
+ background-size: 0.857em;
+ padding-right: 1em;
+ }
+ .mw-parser-output a.external.free {
+ word-break: break-all;
+ }
+ /* stylelint-enable selector-max-specificity */
+ /**
+ * The following styles are copied from content.links.less
+ */
+ /* self links */
+ /* stylelint-disable selector-max-specificity */
+ a.mw-selflink {
+ color: inherit;
+ font-weight: bold;
+ text-decoration: inherit;
+ }
+ a.mw-selflink:hover {
+ cursor: inherit;
+ }
+ /* Underline preference */
+ .mw-underline-always a {
+ text-decoration: underline;
+ }
+ .mw-underline-never a {
+ text-decoration: none;
+ }
+ /* Plainlinks - this can be used to switch
+ * off special external link styling */
+ .plainlinks a.external {
+ background: none !important;
+ /* stylelint-disable-line declaration-no-important */
+ padding: 0 !important;
+ /* stylelint-disable-line declaration-no-important */
+ }
+ /* stylelint-enable selector-max-specificity */
+ /**
+ * Dropdown container
+ */
+ .vector-dropdown {
+ position: relative;
+ /**
+ * Dropdown toggle buttons. Doesn't apply to icon only buttons like the main menu dropdown.
+ * - language variants, Actions menus
+ * - more menu, user menu
+ * - ULS button in sticky header
+ */
+ /**
+ * Invisible checkbox covering the dropdown toggle button.
+ */
+ }
+ .vector-dropdown .vector-dropdown-label:not( .cdx-button--icon-only ) {
+ display: inline-flex;
+ align-items: center;
+ }
+ .vector-dropdown .vector-dropdown-label:not( .cdx-button--icon-only )::after {
+ content: '';
+ /* stylelint-enable @stylistic/indentation */
+ min-width: 10px;
+ min-height: 10px;
+ width: calc(var(--font-size-medium, 1rem) - 4px);
+ height: calc(var(--font-size-medium, 1rem) - 4px);
+ display: inline-block;
+ vertical-align: text-bottom;
+ width: 0.75rem;
+ height: 0.75rem;
+ margin-left: 7px;
+ }
+ @supports not ( ( -webkit-mask-image: none ) or ( mask-image: none ) ) {
+ .vector-dropdown .vector-dropdown-label:not( .cdx-button--icon-only )::after {
+ background-position: center;
+ background-repeat: no-repeat;
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+ background-size: calc(max( calc(var(--font-size-medium, 1rem) - 4px), 10px ));
+ }
+ }
+ @supports ( -webkit-mask-image: none ) or ( mask-image: none ) {
+ .vector-dropdown .vector-dropdown-label:not( .cdx-button--icon-only )::after {
+ /* stylelint-disable plugin/no-unsupported-browser-features */
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: calc(max( calc(var(--font-size-medium, 1rem) - 4px), 10px ));
+ mask-size: calc(max( calc(var(--font-size-medium, 1rem) - 4px), 10px ));
+ /* stylelint-enable plugin/no-unsupported-browser-features */
+ }
+ }
+ @supports not ( ( -webkit-mask-image: none ) or ( mask-image: none ) ) {
+ .vector-dropdown .vector-dropdown-label:not( .cdx-button--icon-only )::after {
+ background-image: url("data:image/svg+xml;utf8,'s inside .vector-menu-tabs
+ * and dropdown menus inside the article toolbar
+ */
+ .vector-menu-tabs .mw-list-item.vector-tab-noicon,
+ .vector-page-toolbar-container .vector-dropdown {
+ margin: 0 8px;
+ }
+ .vector-menu-tabs .mw-list-item,
+ .vector-page-toolbar-container .vector-dropdown-label {
+ white-space: nowrap;
+ }
+ .vector-menu-tabs .mw-list-item,
+ .vector-page-toolbar-container .vector-dropdown {
+ float: left;
+ margin-bottom: 0;
+ /* overrides default `li` styling */
+ }
+ .vector-menu-tabs .mw-list-item > a,
+ .vector-page-toolbar-container .vector-dropdown > a,
+ .vector-menu-tabs .mw-list-item .vector-dropdown-label,
+ .vector-page-toolbar-container .vector-dropdown .vector-dropdown-label {
+ display: inline-flex;
+ position: relative;
+ cursor: pointer;
+ font-weight: normal;
+ }
+ .vector-menu-tabs .mw-list-item .vector-dropdown-label,
+ .vector-page-toolbar-container .vector-dropdown .vector-dropdown-label {
+ font-size: inherit;
+ border: 0;
+ }
+ .vector-menu-tabs .mw-list-item.vector-tab-noicon > a,
+ .vector-page-toolbar-container .vector-dropdown.vector-tab-noicon > a,
+ .vector-menu-tabs .mw-list-item .vector-dropdown-label,
+ .vector-page-toolbar-container .vector-dropdown .vector-dropdown-label {
+ padding: 12px 0 7px 0;
+ margin-bottom: -1px;
+ }
+ .vector-page-titlebar {
+ position: relative;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: flex-end;
+ align-items: center;
+ }
+ .vector-page-titlebar-blank {
+ box-shadow: none;
+ }
+ .vector-page-titlebar .firstHeading {
+ flex-grow: 1;
+ padding: 0;
+ border: 0;
+ }
+ .vector-page-titlebar .vector-page-titlebar-toc.ve-active {
+ display: none !important;
+ /* stylelint-disable-line declaration-no-important */
+ }
+ .vector-page-titlebar > .cdx-button {
+ font-size: var(--font-size-small, 0.875rem);
+ white-space: nowrap;
+ }
+ .vector-page-titlebar > .cdx-button,
+ .vector-page-titlebar > .mw-portlet-lang {
+ flex-shrink: 0;
+ }
+ .vector-page-titlebar > .cdx-button:last-child,
+ .vector-page-titlebar > .mw-portlet-lang:last-child {
+ margin-right: calc(-1 * 12px);
+ }
+ .vector-page-titlebar > .mw-portlet-lang-icon-only:last-child {
+ margin-right: calc(-1 * 6px);
+ }
+ .vector-page-toolbar-container {
+ display: flex;
+ font-size: var(--font-size-small, 0.875rem);
+ box-shadow: 0 1px var(--border-color-subtle, #c8ccd1);
+ margin-bottom: 1px;
+ }
+ .vector-page-toolbar-container .mw-portlet-views {
+ display: none;
+ }
+ .vector-page-toolbar-container .vector-icon {
+ min-width: 10px;
+ min-height: 10px;
+ width: var(--font-size-medium, 1rem);
+ height: var(--font-size-medium, 1rem);
+ display: inline-block;
+ vertical-align: text-bottom;
+ background-size: calc( max( var(--font-size-medium, 1rem), 14px ) );
+ }
+ @supports not ( ( -webkit-mask-image: none ) or ( mask-image: none ) ) {
+ .vector-page-toolbar-container .vector-icon {
+ background-position: center;
+ background-repeat: no-repeat;
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+ background-size: calc(max( var(--font-size-medium, 1rem), 10px ));
+ }
+ }
+ @supports ( -webkit-mask-image: none ) or ( mask-image: none ) {
+ .vector-page-toolbar-container .vector-icon {
+ /* stylelint-disable plugin/no-unsupported-browser-features */
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: calc(max( var(--font-size-medium, 1rem), 10px ));
+ mask-size: calc(max( var(--font-size-medium, 1rem), 10px ));
+ /* stylelint-enable plugin/no-unsupported-browser-features */
+ }
+ }
+ #left-navigation {
+ display: flex;
+ margin-left: -8px;
+ flex-grow: 1;
+ }
+ #right-navigation {
+ display: flex;
+ margin-right: -8px;
+ }
+ #right-navigation .vector-dropdown-content {
+ left: auto;
+ right: 0;
+ }
+ .vector-search-box {
+ font-size: var(--font-size-small, 0.875rem);
+ flex-grow: 1;
+ }
+ .vector-search-box .vector-typeahead-search-container {
+ max-width: 31.25rem;
+ margin-right: 12px;
+ }
+ .vector-search-box .cdx-typeahead-search--show-thumbnail.cdx-typeahead-search--auto-expand-width:not( .cdx-typeahead-search--expanded ) {
+ margin-left: calc((12px + 40px) - (18px + 8px));
+ }
+ /** element that wraps a notice that comes from wiki page */
+ #localNotice {
+ margin-bottom: 0.9em;
+ }
+ /* Site Notice (includes notices from CentralNotice extension) */
+ #siteNotice {
+ font-size: 0.8em;
+ margin: 24px 0;
+ position: relative;
+ text-align: center;
+ }
+ @keyframes rotate {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+ /* Watch/Unwatch Icon Styling */
+ /* Only use icon if the menu item is not collapsed into the "More" dropdown
+ * (in which case it is inside `.vector-dropdown` instead of `.vector-menu-tabs`). */
+ .vector-animations-ready .mw-watchlink .vector-icon {
+ transition: transform 500ms;
+ }
+ [dir='ltr'] .mw-watchlink .mw-ui-icon-wikimedia-unStar {
+ transform: rotate(72deg);
+ }
+ [dir='rtl'] .mw-watchlink .mw-ui-icon-wikimedia-unStar {
+ transform: rotate(-72deg);
+ }
+ /* FIXME: Remove vector-settings class when cache cleared. */
+ .mw-portlet-dock-bottom,
+ .vector-settings {
+ display: none;
+ }
+ .vector-sticky-header-container {
+ display: none;
+ }
+}
+@media screen and (min-width: 1120px) {
+ .mw-page-container,
+ .vector-header-container .mw-header,
+ .vector-header-container .vector-sticky-header {
+ padding-left: 2.75rem;
+ padding-right: 2.75rem;
+ }
+}
+@media screen and (min-width: 1680px) {
+ .mw-page-container,
+ .vector-header-container .mw-header,
+ .vector-header-container .vector-sticky-header {
+ padding-left: 3.25rem;
+ padding-right: 3.25rem;
+ }
+}
+@media screen and (min-width: 1120px) {
+ .mw-page-container-inner {
+ display: grid;
+ column-gap: 24px;
+ grid-template: min-content 1fr min-content / 12.25rem minmax(0, 1fr);
+ grid-template-areas: 'siteNotice siteNotice' 'columnStart pageContent' 'footer footer';
+ }
+ .vector-sitenotice-container {
+ grid-area: siteNotice;
+ }
+ .vector-column-start {
+ grid-area: columnStart;
+ overflow-anchor: none;
+ }
+ .mw-content-container {
+ grid-area: pageContent;
+ }
+ .mw-footer-container {
+ grid-area: footer;
+ }
+ .vector-feature-page-tools-pinned-enabled .vector-column-end,
+ .vector-feature-appearance-pinned-clientpref-1 .vector-column-end {
+ width: 12.25rem;
+ }
+ .vector-column-start,
+ .vector-column-end {
+ margin-top: 2.8rem;
+ border-top: 1px solid transparent;
+ }
+}
+@media screen and (min-width: 1680px) {
+ .mw-page-container-inner {
+ grid-template-columns: 15.5rem minmax(0, 1fr);
+ }
+ .mw-header {
+ display: grid;
+ column-gap: 24px;
+ grid-template: auto / 15.5rem minmax(0, 1fr);
+ grid-template-areas: 'headerStart headerEnd';
+ }
+ .mw-header .vector-header-start {
+ grid-area: headerStart;
+ }
+ .mw-header .vector-header-end {
+ grid-area: headerEnd;
+ }
+ .vector-feature-page-tools-pinned-enabled .vector-column-end,
+ .vector-feature-appearance-pinned-clientpref-1 .vector-column-end {
+ width: 15.5rem;
+ }
+}
+@media screen and (min-width: 1120px) {
+ .mw-body {
+ grid-template: min-content min-content min-content 1fr / minmax(0, 59.25rem) min-content;
+ /**
+ * NOTE: T327715 - 'titlebar-cx' grid area is a temporary workaround to accommodate
+ * the Content Translation extension and should not be used beyond that.
+ * FIXME: This can be removed when T322740 is resolved.
+ */
+ grid-template-areas: 'titlebar-cx .' 'titlebar columnEnd' 'toolbar columnEnd' 'content columnEnd';
+ }
+ .mw-body .vector-page-titlebar {
+ grid-area: titlebar;
+ }
+ .mw-body .vector-page-toolbar {
+ grid-area: toolbar;
+ }
+ .mw-body #bodyContent {
+ grid-area: content;
+ }
+ .mw-body .vector-column-end {
+ grid-area: columnEnd;
+ overflow-anchor: none;
+ }
+ .vector-feature-page-tools-pinned-enabled .mw-body,
+ .vector-feature-appearance-pinned-clientpref-1 .mw-body {
+ column-gap: 24px;
+ }
+ .vector-feature-limited-width-clientpref-0 .mw-body,
+ .vector-feature-limited-width-content-disabled .mw-body {
+ grid-template-columns: minmax(0, 1fr) min-content;
+ }
+}
+@media screen and (max-width: calc(1120px - 1px)) {
+ .client-js .vector-page-titlebar-toc {
+ margin-right: 8px;
+ }
+ .client-js .vector-page-titlebar-toc .vector-dropdown-content {
+ max-width: none;
+ }
+ .client-js .vector-page-titlebar-toc .vector-toc {
+ width: max-content;
+ min-width: 200px;
+ max-width: min( 0.85 * 59.25rem, 75vw );
+ }
+ .client-js .vector-below-page-title .vector-page-titlebar-toc {
+ position: fixed;
+ top: 12px;
+ left: 12px;
+ margin: 0;
+ z-index: 50;
+ }
+}
+@media screen and (min-width: 1120px) {
+ .client-js.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar-toc {
+ margin-right: 8px;
+ }
+ .client-js.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar-toc .vector-dropdown-content {
+ max-width: none;
+ }
+ .client-js.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar-toc .vector-toc {
+ width: max-content;
+ min-width: 200px;
+ max-width: min( 0.85 * 59.25rem, 75vw );
+ }
+ .client-js.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ).vector-below-page-title .vector-page-titlebar-toc {
+ position: fixed;
+ top: 12px;
+ left: 12px;
+ margin: 0;
+ z-index: 50;
+ }
+ .client-js.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-toc {
+ margin-right: 8px;
+ }
+ .client-js.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-toc .vector-dropdown-content {
+ max-width: none;
+ }
+ .client-js.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-toc .vector-toc {
+ width: max-content;
+ min-width: 200px;
+ max-width: min( 0.85 * 59.25rem, 75vw );
+ }
+}
+@media screen and (max-width: calc(1120px - 1px)) {
+ .client-nojs.vector-feature-toc-pinned-clientpref-1 .vector-sticky-pinned-container {
+ position: static;
+ }
+ .client-nojs.vector-feature-toc-pinned-clientpref-1 #vector-toc-pinned-container {
+ max-height: 200px;
+ }
+}
+@media screen and (max-width: calc(1120px - 1px)) {
+ .client-js .vector-pinned-container {
+ display: none;
+ }
+ .client-js .vector-sticky-pinned-container {
+ display: none;
+ }
+}
+@media screen and (min-width: 1120px) {
+ .client-js .vector-pinnable-header-unpinned .vector-pinnable-header-pin-button,
+ .client-js .vector-pinnable-header-pinned .vector-pinnable-header-unpin-button {
+ display: inline-block;
+ }
+}
+@media screen and (min-width: 640px) {
+ .vector-page-tools .vector-more-collapsible-item {
+ display: none;
+ }
+}
+@media screen and (max-width: calc(640px - 1px)) {
+ .vector-page-tools .vector-has-collapsible-items {
+ display: block;
+ }
+}
+@media screen and (max-width: calc(1120px - 1px)) {
+ .client-js .vector-page-titlebar .vector-toc-landmark {
+ display: block;
+ }
+ .client-js .mw-table-of-contents-container.vector-toc-landmark {
+ display: none;
+ }
+}
+@media screen and (max-width: calc(1120px - 1px)) {
+ #p-lang-btn-label.cdx-button--icon-only,
+ #vector-page-titlebar-toc-label,
+ .vector-header .cdx-button.cdx-button--icon-only {
+ min-height: 44px;
+ min-width: 44px;
+ }
+}
+@media screen and (min-width: 1120px) {
+ .vector-button-flush-left {
+ margin-left: calc(-1 * 6px);
+ }
+}
+@media screen and (max-width: calc(1120px - 1px)) {
+ .vector-button-flush-left {
+ margin-left: calc(-1 * 12px);
+ }
+}
+@media screen and (min-width: 1120px) {
+ .vector-button-flush-right {
+ margin-right: calc(-1 * 6px);
+ }
+}
+@media screen and (max-width: calc(1120px - 1px)) {
+ .vector-button-flush-right {
+ margin-right: calc(-1 * 12px);
+ }
+}
+@media screen and (max-width: 1399px) {
+ .vector-feature-limited-width-clientpref-0 #skin-client-prefs-vector-feature-limited-width .skin-client-pref-exclusion-notice {
+ display: block;
+ }
+}
+@media screen and (min-width: 640px) {
+ .vector-user-menu.user-links-collapsible-item,
+ .vector-user-menu .user-links-collapsible-item {
+ display: none;
+ }
+}
+@media screen and (max-width: calc(640px - 1px)) {
+ .vector-user-links-main .user-links-collapsible-item {
+ display: none;
+ }
+}
+@media screen and (min-width: 1680px) {
+ #pt-userpage-2 {
+ max-width: 12.5rem;
+ }
+}
+@media screen and (min-width: 1120px) {
+ .mw-header .search-toggle {
+ display: none !important;
+ /* stylelint-disable-line declaration-no-important */
+ }
+}
+@media screen and (min-width: 1120px) {
+ .mw-header .vector-typeahead-search-container {
+ display: block;
+ }
+}
+@media screen and (max-width: calc(1120px - 1px)) {
+ .mw-header {
+ /**
+ * Toggles the visibility of the search box at lower resolutions.
+ */
+ }
+ .mw-header.vector-header-search-toggled .vector-header-start,
+ .mw-header.vector-header-search-toggled .search-toggle {
+ display: none;
+ }
+ .mw-header.vector-header-search-toggled .vector-typeahead-search-container {
+ display: block;
+ max-width: none;
+ }
+ .mw-header.vector-header-search-toggled .vector-search-box {
+ position: relative;
+ }
+ .mw-header.vector-header-search-toggled .cdx-typeahead-search--expanded .cdx-search-input__end-button {
+ border-bottom-right-radius: 0;
+ }
+}
+@media screen and (min-width: 640px) {
+ .vector-page-toolbar-container .mw-portlet-views:not( .emptyPortlet ) {
+ display: block;
+ }
+}
+@media screen and (min-width: 1680px) {
+ .client-js .vector-search-box.vector-search-box-auto-expand-width {
+ margin-left: calc(-1 * 24px);
+ }
+}
+@media all {
+ .mw-logo {
+ display: flex;
+ height: 100%;
+ align-items: center;
+ }
+ .mw-logo-icon {
+ float: left;
+ margin-right: 10px;
+ display: none;
+ width: 3.125em;
+ height: 3.125em;
+ }
+ .mw-logo-container {
+ float: left;
+ max-width: 120px;
+ }
+ .mw-logo-container img {
+ width: 100%;
+ }
+ .mw-logo-wordmark {
+ display: block;
+ margin: 0 auto;
+ }
+ .mw-logo-tagline {
+ display: block;
+ margin: 5px auto 0;
+ }
+}
+@media all and (min-width: 640px) {
+ .mw-logo-icon {
+ display: block;
+ }
+}
+@media all and (min-width: 640px) {
+ .mw-logo-container {
+ max-width: none;
+ }
+ .mw-logo-container img {
+ width: auto;
+ }
+}
+@media print {
+ /* These styles retain the existing typography in skin.less
+In future (when deploying these styles) we may want to refactor skins.vector.styles
+to apply certain styles in print as well as screen mode. */
+ .toc,
+ body {
+ padding: 10px;
+ font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
+ }
+ .printfooter,
+ .mw-footer,
+ .thumb,
+ figure,
+ table,
+ ol,
+ dl,
+ ul,
+ .mw-heading3,
+ h3,
+ .mw-heading4,
+ h4,
+ .mw-heading5,
+ h5,
+ .mw-heading6,
+ h6 {
+ font-family: sans-serif;
+ }
+ img {
+ font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
+ }
+ .mw-body a:not( .image ) {
+ border-bottom: 1px solid #aaa;
+ }
+ .firstHeading {
+ font-size: 25pt;
+ line-height: 28pt;
+ margin-bottom: 20px;
+ padding-bottom: 5px;
+ }
+ .firstHeading,
+ .mw-heading2,
+ h2 {
+ overflow: hidden;
+ border-bottom: 2px solid var(--color-emphasized, #101418);
+ }
+ .mw-heading3,
+ h3,
+ .mw-heading4,
+ h4,
+ .mw-heading5,
+ h5,
+ .mw-heading6,
+ h6 {
+ margin: 30px 0 0;
+ }
+ .mw-heading2,
+ h2,
+ .mw-heading3,
+ h3,
+ .mw-heading4,
+ h4,
+ .mw-heading5,
+ h5,
+ .mw-heading6,
+ h6 {
+ padding: 0;
+ position: relative;
+ }
+ .mw-heading2,
+ h2 {
+ font-size: 18pt;
+ line-height: 24pt;
+ margin-bottom: 0.25em;
+ }
+ .mw-heading3,
+ h3 {
+ font-size: 14pt;
+ line-height: 20pt;
+ }
+ .mw-heading4,
+ h4,
+ .mw-heading5,
+ h5,
+ .mw-heading6,
+ h6 {
+ font-size: 12pt;
+ line-height: 16pt;
+ }
+ p {
+ font-size: 12pt;
+ line-height: 16pt;
+ margin-top: 5px;
+ text-align: justify;
+ }
+ p::before {
+ content: '';
+ display: block;
+ width: 120pt;
+ overflow: hidden;
+ page-break-after: avoid;
+ }
+ blockquote {
+ border-left: 2px solid var(--color-emphasized, #101418);
+ padding-left: 20px;
+ }
+ ol,
+ ul {
+ margin: 10px 0 0 1.6em;
+ padding: 0;
+ }
+ ol li,
+ ul li {
+ padding: 2px 0;
+ font-size: 12pt;
+ }
+ table ol li,
+ table ul li {
+ font-size: inherit;
+ }
+ .toc {
+ page-break-before: avoid;
+ page-break-after: avoid;
+ background: none;
+ border: 0;
+ display: table;
+ }
+ .toc a {
+ border: 0;
+ font-weight: normal;
+ }
+ .toc > ul > li {
+ margin-bottom: 4px;
+ font-weight: bold;
+ }
+ .toc ul {
+ margin: 0;
+ list-style: none;
+ }
+ .toc ul ul {
+ padding-left: 30px;
+ }
+ .toc li.toclevel-1 > a {
+ font-size: 12pt;
+ font-weight: bold;
+ }
+ #mw-navigation,
+ .noprint,
+ .mw-jump-link,
+ .mw-portlet-lang,
+ .toc .tocnumber {
+ display: none;
+ }
+ .printfooter {
+ margin-top: 10px;
+ border-top: 3px solid var(--color-emphasized, #101418);
+ padding-top: 10px;
+ font-size: 10pt;
+ clear: both;
+ }
+ .mw-footer {
+ margin-top: 12px;
+ border-top: 1px solid #eee;
+ padding-top: 5px;
+ }
+ #footer-info {
+ margin: 0;
+ padding: 0;
+ }
+ #footer-info li {
+ color: #999;
+ list-style: none;
+ display: block;
+ padding-bottom: 10px;
+ font-size: 10pt;
+ }
+ #footer-info li a {
+ color: #999 !important;
+ /* stylelint-disable-line declaration-no-important */
+ }
+ #footer-info-lastmod {
+ color: var(--color-emphasized, #101418);
+ font-size: 12pt;
+ font-weight: bold;
+ }
+ /* stylelint-disable no-invalid-double-slash-comments */
+ .vector-page-toolbar,
+ .vector-header-start > *:not( .mw-logo ),
+ .vector-header-end,
+ #mw-panel-toc,
+ #vector-sticky-header,
+ #p-lang-btn,
+ .vector-menu-checkbox,
+ nav,
+ #vector-page-titlebar-toc,
+ #footer {
+ /* stylelint-disable-next-line declaration-no-important */
+ display: none !important;
+ }
+}
+
+
+
+/* end https://en.wikipedia.org/w/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector-2022&version=&* */
diff --git a/www/js/app.js b/www/js/app.js
index 4f099ad4..c0089a13 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -2684,6 +2684,16 @@ function removePageMaxWidth () {
}
docStyle.margin = '0 auto';
}
+ // Remove class key "mw-page-container-inner" from any element with that class (for actionparse ZIMs)
+ var actionParseRemoveClasses = ['mw-page-container-inner', ''];
+ for (i = 0; i < actionParseRemoveClasses.length; i++) {
+ var mwPageContainer = doc.getElementsByClassName(actionParseRemoveClasses[i]);
+ if (mwPageContainer && mwPageContainer.length) {
+ for (var j = 0; j < mwPageContainer.length; j++) {
+ mwPageContainer[j].classList.remove(actionParseRemoveClasses[i]);
+ }
+ }
+ }
if (doc.body && doc.body.classList.contains('article-list-home')) {
doc.body.style.padding = '2em';
}
@@ -6243,8 +6253,8 @@ function displayArticleContentInContainer (dirEntry, htmlArticle) {
// Put site.js in the correct position
htmlArticle = htmlArticle.replace(/(]+\/site\.js["']><\/script>\s*)((?:[^<]|<(?!\/body))+)/, '$2$1');
// @TODO Remove when fixed in https://github.com/openzim/mwoffliner/issues/1872
- // Add missing title to WikiMedia articles for post June 2023 scrapes
- htmlArticle = !params.isLandingPage && !/]+(?:section-heading|section-title|article-header)/i.test(htmlArticle) ? htmlArticle.replace(/(]+>\s*)/i, '$1' + dirEntry.getTitleOrUrl().replace(/</g, '<') + ' ') : htmlArticle;
+ // Add missing title to WikiMedia articles for post June 2023 scrapes, also post-June 2025
+ htmlArticle = !params.isLandingPage && !/]+(?:section-heading|section-title|article-header|first-heading)/i.test(htmlArticle) ? htmlArticle.replace(/(]+>\s*)/i, '$1' + dirEntry.getTitleOrUrl().replace(/</g, '<') + ' ') : htmlArticle;
// Remove hard-coded image widths for new mobile-html endpoint ZIMs
htmlArticle = htmlArticle.replace(/(]+?width=)[^>]+?height=['"][^'"]+?['"]/ig, '$1$2"320px"');
htmlArticle = htmlArticle.replace(/(]+(?:min-width:\s*|width=['"]))(\d+px)([^>]+>\s*]+style=['"])/ig, '$1$2$3max-width: $2; ');
@@ -6254,7 +6264,7 @@ function displayArticleContentInContainer (dirEntry, htmlArticle) {
// Convert section tags to details tags (we have to loop because regex only matches innermost )
for (i = 5; i--;) {
htmlArticle = htmlArticle.replace(/]*data-mw-section-id=["'][1-9][^>]*)>((?:(?=([^<]+))\3|<(?!section\b[^>]*>))*?)<\/section>/ig, function (m0, m1, m2) {
- var summary = m2.replace(/(?:]+>)?(<(h[2-9])\b[^>]*>(?:[^<]|<(?!\2))+?<\/\2>)(?:<\/div>)?/i, '$1 ');
+ var summary = m2.replace(/(?:]+>)?(<(h[2-9])\b[^>]*>(?:[^<]|<(?!\2))+?<\/\2>)(?:<\/div>)?/i, '$1 ');
return '' + summary + ' ';
});
// We can stop iterating if all sections are consumed
@@ -6491,7 +6501,7 @@ function displayArticleContentInContainer (dirEntry, htmlArticle) {
zimType = /-\/s\/style\.css/i.test(testCSS) ? 'desktop' : zimType;
zimType = /-\/static\/main\.css|statc\/css\/sotoki.css/i.test(testCSS) ? 'desktop-stx' : zimType; // Support stackexchange
zimType = /gutenberg\.css/i.test(testCSS) ? 'desktop-gtb' : zimType; // Support Gutenberg
- zimType = /minerva|mobile/i.test(testCSS) ? 'mobile' : zimType;
+ zimType = /minerva|mobile|vector/i.test(testCSS) ? 'mobile' : zimType;
cssSource = cssSource == 'auto' ? zimType : cssSource; // Default to in-built zimType if user has selected automatic detection of styles
if (/minerva|inserted.style|pcs\.css/i.test(testCSS) && (cssCache || zimType != cssSource)) {
// Substitute ridiculously long style name TODO: move this code to transformStyles
diff --git a/www/js/lib/transformStyles.js b/www/js/lib/transformStyles.js
index 48df9387..9887c264 100644
--- a/www/js/lib/transformStyles.js
+++ b/www/js/lib/transformStyles.js
@@ -103,6 +103,7 @@ function filterCSS (zl, zim, cc, cs, i) {
/\/static\/css\/sotoki.css/i.test(zl) ||
/\/mobile.css/i.test(zl) ||
/\/style-mobile.css/i.test(zl) ||
+ /\/skins.vector.styles.css/i.test(zl) ||
/\/skins.minerva.base.reset\|skins.minerva.content.styles\|ext.cite.style\|mediawiki.page.gallery.styles\|mobile.app.pagestyles.android\|mediawiki.skinning.content.parsoid.css/i.test(zl)
)) {
zl = zl.replace(/\|/ig, '_'); // Replace "|" with "_" (legacy for some stylesheets with pipes in filename - but next line renders this redundant in current implementation)
@@ -112,6 +113,7 @@ function filterCSS (zl, zim, cc, cs, i) {
// Rename this required mobile style so that we don't trigger reading ZIM as mobile in print intercept
zl = /\/mobile_main_page\.css/.test(zl) ? '-/mw/newstyle_main_page.css' : zl;
zl = /\/content\.parsoid\.css/.test(zl) ? '-/s/css_modules/content.parsoid.css' : zl;
+ zl = /skins\.vector\.styles\.css/.test(zl) ? '-/mw/skins.vector.styles.css' : zl;
zl = /\/sotoki\.css/.test(zl) ? 'C/static/css/sotoki.css' : zl;
// Replace bootstrap with own: DEV: when upgrading to Bootstrap 4, stop doing this!
zl = zl.replace(/.+(bootstrap[^/]*?\.css)/i, 'css/$1');