Page MenuHomePhabricator

@noflip is not working in toc related LESS file
Closed, ResolvedPublic

Description

Even though this line should ensure that .tocnumber .mw-content-rtl elements have padding-left: 0.5em;, we recently noticed that on fawiki they are being rendered with padding-right: 0.5em; instead. It seems like @noflip is not working correctly. Here is the CSS that is prepared from the LESS file, as it appears in the browser's console:

.tocnumber {
 color:#202122;
 padding-right:0;
 padding-left:0.5em
}
.mw-content-ltr .tocnumber {
 padding-right:0;
 padding-left:0.5em
}
.mw-content-rtl .tocnumber {
 padding-right:0.5em;
 padding-left:0
}

The effect of this is that numbers in the TOC are too close to the text that comes after them.

The issue is new. The code above has not changed in a while. The problem must reside somewhere else. Other code that uses @noflip seems not to be affected.

This issue affects all skins. It is not limited to fawiki and is happening in other RTL wikis too (e.g. arwiki) but it does not affect LTR wikis.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Huji updated the task description. (Show Details)
Huji updated the task description. (Show Details)

As I look at the output of https://fa.wikipedia.org/w/load.php?lang=fa&only=styles&skin=vector&modules=skins.vector.icons%2Cstyles which I have pasted below after tidying I noticed that it contains to sets of rules for .mw-content-rtl .tocnumber, one for screen and one for print. Notably, the @noflip works correctly for the print version but not the screen version.

CSS output
@import '/srv/mediawiki/php-1.37.0-wmf.1/resources/src/mediawiki.skinning/toc/print.css';
.mw-ui-icon-wikimedia-language:before {
    background-image: url(/w/load.php?modules=skins.vector.icons&image=language&format=rasterized&skin=vector&version=7jcqq);
    background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.vector.icons&image=language&format=original&skin=vector&version=7jcqq)}
body {
    margin: 0}
main {
    display: block}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible}
abbr[title] {
    border-bottom: 1px dotted;
    cursor: help}
@supports (text-decoration: underline dotted) {
    abbr[title] {
    border-bottom: 0;
    text-decoration: underline dotted}
}
pre,code,tt,kbd,samp {
    font-family: monospace,monospace}
sub,sup {
    line-height: 1}
img {
    border: 0}
button,input,optgroup,select,textarea {
    margin: 0}
button:: -moz-focus-inner,[type='button']:: -moz-focus-inner,[type='reset']:: -moz-focus-inner,[type='submit']:: -moz-focus-inner {
    border-style: none;
    padding: 0}
legend {
    color: inherit;
    padding: 0}
.messagebox,.errorbox,.warningbox,.successbox {
    color: #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 16px;
    border: 1px solid;
    padding: 12px 24px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden}
.messagebox: only-child,.errorbox: only-child,.warningbox: only-child,.successbox: only-child {
    margin: 0}
.messagebox h2,.errorbox h2,.warningbox h2,.successbox h2 {
    color: inherit;
    display: inline;
    margin: 0 0 0 0.5em;
    border: 0;
    font-size: 1em;
    font-weight: bold}
.messagebox .mw-logevent-loglines li,.errorbox .mw-logevent-loglines li,.warningbox .mw-logevent-loglines li,.successbox .mw-logevent-loglines li {
    font-size: 90%}
.messagebox {
    background-color: #eaecf0;
    border-color: #a2a9b1}
.errorbox {
    background-color: #fee7e6;
    border-color: #d33}
.warningbox {
    background-color: #fef6e7;
    border-color: #fc3}
.successbox {
    background-color: #d5fdf4;
    border-color: #14866d}
.toctogglecheckbox: checked ~ ul {
    display: none}
@media screen {
    html,body {
    height: 100%}
:focus {
    outline-color: #3366cc}
html {
    font-size: 100%}
html,body {
    font-family: sans-serif}
ul {
    list-style-image: url(/w/skins/Vector/resources/common/images/bullet-icon.svg?d4515)}
pre,.mw-code {
    line-height: 1.3}
.mw-jump-link: not(:focus) {
    display: block;
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden}
#p-personal li {
    font-size: 0.75em}
.mw-editsection,.mw-editsection-like {
    font-family: sans-serif}
.mw-body h1,.mw-body-content h1,.mw-body-content h2 {
    margin-bottom: 0.25em;
    padding: 0;
    font-family: 'Linux Libertine','Georgia','Times',serif;
    line-height: 1.3}
.mw-body h1:lang(ja),.mw-body-content h1:lang(ja),.mw-body-content h2:lang(ja),.mw-body h1:lang(he),.mw-body-content h1:lang(he),.mw-body-content h2:lang(he),.mw-body h1:lang(ko),.mw-body-content h1:lang(ko),.mw-body-content h2:lang(ko) {
    font-family: sans-serif}
.mw-body h1:lang(my),.mw-body-content h1:lang(my),.mw-body-content h2:lang(my) {
    line-height: normal}
.mw-body h1,.mw-body-content h1 {
    font-size: 1.8em}
.mw-body-content {
    font-size: 0.875em;
    font-size: calc(1em * 0.875);
    line-height: 1.6}
.mw-body-content h1 {
    margin-top: 1em}
.mw-body-content h2 {
    margin-top: 1em;
    font-size: 1.5em}
.mw-body-content h3,.mw-body-content h4,.mw-body-content h5,.mw-body-content h6 {
    margin-top: 0.3em;
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1.6}
.mw-body-content h3 {
    font-size: 1.2em}
.mw-body-content h3,.mw-body-content h4 {
    font-weight: bold}
.mw-body-content h4,.mw-body-content h5,.mw-body-content h6 {
    font-size: 100%}
.mw-body-content .toc h2 {
    font-family: sans-serif;
    font-size: 100%}
.mw-body-content p {
    margin: 0.5em 0}
.mw-body-content blockquote {
    border-right: 4px solid #eaecf0;
    padding: 8px 32px}
.mw-body-content blockquote >:first-child {
    margin-top: 0}
.mw-body-content blockquote >: last-child {
    margin-bottom: 0}
.mw-parser-output .external {
    background-image: url(/w/skins/Vector/resources/common/images/external-link-rtl-icon.svg?54d13);
    background-position: center left;
    background-repeat: no-repeat;
    padding-left: 13px}
.mw-body .mw-indicators {
    font-size: 0.875em;
    line-height: 1.6;
    position: relative}
.mw-body .mw-indicator {
    display: inline-block}
#siteNotice {
    font-size: 0.8em}
#p-personal .vector-menu-content-list {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: baseline}
.mw-portlet h3 {
    display: none}
.mw-portlet ul {
    list-style: none none;
    margin: 0}
.mw-portlet li {
    margin-right: 0.75em;
    padding-top: 0.5em;
    line-height: 1.16666667}
#pt-anonuserpage,#pt-userpage a {
    background-image: url(/w/skins/Vector/resources/common/images/user-avatar.svg?b7f58);
    background-position: right 0.33333333em;
    background-repeat: no-repeat;
    background-size: 1.16666667em 1.16666667em;
    padding-top: 0.5em !important;
    padding-right: 16px !important}
#pt-userpage {
    padding-top: 0 !important}
#pt-userpage a {
    display: inline-block}
#pt-anonuserpage {
    color: #54595d}
.vector-menu-tabs {
    background-position: right bottom;
    float: right;
    height: 2.5em;
    padding-right: 1px}
.vector-menu-tabs h3 {
    display: none}
.vector-menu-tabs ul {
    float: right;
    height: 100%;
    list-style: none none;
    margin: 0;
    padding: 0}
.vector-menu-tabs li {
    background-image: url(/w/skins/Vector/resources/common/images/tab-normal-fade.png?1cc52);
    background-image: linear-gradient(to top,#77c1f6 0,#e8f2f8 1px,#ffffff 100%);
    background-position: right bottom;
    background-repeat: repeat-x;
    float: right;
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.125em;
    white-space: nowrap}
.vector-menu-tabs li a {
    background-position: left bottom;
    color: #0645ad;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    float: right;
    height: 3.07692308em;
    position: relative;
    padding-top: 1.25em;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 0.8125em;
    cursor: pointer}
.vector-menu-tabs .new a,.vector-menu-tabs .new a:visited {
    color: #a55858}
.vector-menu-tabs .selected {
    background: #ffffff}
.vector-menu-tabs .selected a,.vector-menu-tabs .selected a:visited {
    color: #202122;
    text-decoration: none}
.vector-menu-tabs .icon a {
    background-position: left bottom;
    background-repeat: no-repeat}
@-webkit-keyframes rotate {
    from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg)}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg)}
}
@-moz-keyframes rotate {
    from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg)}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg)}
}
@keyframes rotate {
    from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg)}
to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg)}
}
.vector-menu-tabs .mw-watchlink.icon a {
    width: 2.15384615em;
    height: 0;
    padding: 3.07692308em 0 0 0;
    overflow: hidden}
.vector-menu-tabs .mw-watchlink.icon a:before {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    content: '';
    display: block;
    position: absolute;
    top: 1.07692308em;
    right: 0.38461538em;
    width: 1.23076923em;
    height: 1.23076923em}
.vector-menu-tabs #ca-unwatch.icon a:before {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Vector/resources/common/images/unwatch-icon.svg?c5368)}
.vector-menu-tabs #ca-unwatch.mw-watchlink-temp.icon a:before {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Vector/resources/common/images/unwatch-temp-icon.svg?195f5)}
.vector-menu-tabs #ca-watch.icon a:before {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Vector/resources/common/images/watch-icon.svg?6ab6f)}
.vector-menu-tabs #ca-unwatch.icon a:hover:before,.vector-menu-tabs #ca-unwatch.icon a:focus:before {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Vector/resources/common/images/unwatch-icon-hl.svg?5e652)}
.vector-menu-tabs #ca-unwatch.mw-watchlink-temp.icon a:hover:before,.vector-menu-tabs #ca-unwatch.mw-watchlink-temp.icon a:focus:before {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Vector/resources/common/images/unwatch-temp-icon-hl.svg?f3db6)}
.vector-menu-tabs #ca-watch.icon a:hover:before,.vector-menu-tabs #ca-watch.icon a:focus:before {
    background-image: linear-gradient(transparent,transparent),url(/w/skins/Vector/resources/common/images/watch-icon-hl.svg?9bf90)}
.vector-menu-tabs #ca-unwatch.icon .loading:before,.vector-menu-tabs #ca-watch.icon .loading:before {
    -webkit-animation: rotate 700ms infinite linear;
    -moz-animation: rotate 700ms infinite linear;
    animation: rotate 700ms infinite linear;
    outline: 0;
    cursor: default;
    pointer-events: none;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%}
.vector-menu-dropdown {
    direction: rtl;
    float: right;
    cursor: pointer;
    position: relative;
    line-height: 1.125em}
.vector-menu-dropdown h3 {
    color: #54595d;
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 1.25em;
    padding-right: 8px;
    padding-left: 1.84615385em;
    font-size: 0.8125em;
    font-weight: normal}
.vector-menu-dropdown h3:after {
    content: '';
    background-image: url(/w/skins/Vector/resources/common/images/arrow-down.svg?9426f);
    background-position: 0% 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0.76923077em;
    left: 8px;
    bottom: 0;
    width: 1.23076923em;
    opacity: 0.84}
.vector-menu-dropdown h3:hover,.vector-menu-dropdown h3:focus {
    color: #202122}
.vector-menu-dropdown h3:hover:after,.vector-menu-dropdown h3:focus:after {
    opacity: 1}
.vector-menu-dropdown .vector-menu-content {
    background-color: #ffffff;
    list-style: none none;
    min-width: 100%;
    position: absolute;
    top: 2.5em;
    left: -1px;
    margin: 0;
    border: 1px solid #a2a9b1;
    border-top-width: 0;
    padding: 0;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
    text-align: right;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 100ms;
    transition: opacity 100ms;
    z-index: 3}
.vector-menu-dropdown .vector-menu-checkbox: checked ~ .vector-menu-content {
    opacity: 1;
    visibility: visible}
.vector-menu-dropdown ul {
    list-style: none}
.vector-menu-dropdown li {
    padding: 0;
    margin: 0;
    text-align: right;
    line-height: 1em}
.vector-menu-dropdown li a {
    color: #0645ad;
    display: block;
    padding: 0.625em;
    white-space: nowrap;
    cursor: pointer;
    font-size: 0.8125em}
.vector-menu-dropdown .selected a,.vector-menu-dropdown .selected a:visited {
    color: #202122;
    text-decoration: none}
#mw-head .vector-menu-dropdown h3 {
    background-position: left bottom;
    float: right;
    height: 3.07692308em;
    margin: 0 0 0 -1px;
    padding-left: 1.84615385em}
.vector-menu-tabs,.vector-menu-tabs a,#mw-head .vector-menu-dropdown h3 {
    background-image: url(/w/skins/Vector/resources/common/images/tab-separator.png?09d4b);
    background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#a7d7f9 100%);
    background-repeat: no-repeat;
    background-size: 1px 100%}
.vector-menu-checkbox {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: none}
: not(: checked) > .vector-menu-checkbox {
    display: block}
.vector-menu-checkbox:focus + h3 {
    outline: dotted 1px;
    outline: auto -webkit-focus-ring-color}
.vector-menu-portal {
    margin: 0 0.7em 0 0.6em;
    padding: 0.25em 0;
    direction: rtl}
.vector-menu-portal h3 {
    display: block;
    background-image: url(/w/skins/Vector/resources/common/images/portal-separator.png?4ab04);
    background-image: linear-gradient(to left,rgba(200,204,209,0) 0,#c8ccd1 33%,#c8ccd1 66%,rgba(200,204,209,0) 100%);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    color: #54595d;
    margin: 0.5em 0.66666667em 0 0;
    border: 0;
    padding: 0.25em 0;
    font-size: 0.75em;
    font-weight: normal;
    cursor: default}
.vector-menu-portal .vector-menu-content {
    margin-right: 0.5em;
    padding-top: 0}
.vector-menu-portal .vector-menu-content ul {
    list-style: none none;
    margin: 0;
    padding-top: 0.3em}
.vector-menu-portal .vector-menu-content li {
    margin: 0;
    padding: 0.25em 0;
    font-size: 0.75em;
    line-height: 1.125em;
    word-wrap: break-word}
.vector-menu-portal .vector-menu-content li a {
    color: #0645ad}
.vector-menu-portal .vector-menu-content li a:visited {
    color: #0b0080}
#p-search h3 {
    display: block;
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden}
#simpleSearch {
    position: relative;
    height: 100%}
#searchInput {
    background-color: rgba(255,255,255,0.5);
    color: #000000;
    width: 100%;
    height: 2.15384615em;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #a2a9b1;
    border-radius: 2px;
    padding: 5px 0.4em 5px 2.15384615em;
    box-shadow: inset 0 0 0 1px transparent;
    font-family: inherit;
    font-size: 0.8125em;
    direction: rtl;
    -webkit-transition: border-color 250ms,box-shadow 250ms;
    transition: border-color 250ms,box-shadow 250ms;
    -webkit-appearance: none;
    -moz-appearance: textfield}
#simpleSearch:hover #searchInput {
    border-color: #72777d}
#searchInput:focus,#simpleSearch:hover #searchInput:focus {
    outline: 0;
    border-color: #3366cc;
    box-shadow: inset 0 0 0 1px #3366cc}
#searchInput:: -webkit-input-placeholder {
    color: #72777d;
    opacity: 1}
#searchInput: -ms-input-placeholder {
    color: #72777d;
    opacity: 1}
#searchInput:: -moz-placeholder {
    color: #72777d;
    opacity: 1}
#searchInput:: placeholder {
    color: #72777d;
    opacity: 1}
#searchInput:: -webkit-search-decoration,#searchInput:: -webkit-search-cancel-button,#searchInput:: -webkit-search-results-button,#searchInput:: -webkit-search-results-decoration {
    display: none}
#searchButton,#mw-searchButton {
    background-color: transparent;
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    min-width: 28px;
    width: 2.15384615em;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 0.8125em;
    direction: ltr;
    text-indent: -99999px;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1}
#searchButton {
    background: no-repeat center / 1.23076923em url(/w/skins/Vector/resources/common/images/search.svg?bbf78);
    opacity: 0.67}
#p-logo {
    width: 10em;
    height: 160px;
    margin-bottom: 1em}
#p-logo a {
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: 10em;
    height: 160px;
    text-decoration: none}
.mw-footer {
    direction: rtl}
.mw-footer ul {
    list-style: none none;
    margin: 0;
    padding: 0}
.mw-footer li {
    color: #202122;
    margin: 0;
    padding: 0.5em 0;
    font-size: 0.75em}
#footer-icons {
    float: left}
#footer-icons li {
    float: right;
    margin-right: 0.5em;
    line-height: 2;
    text-align: left}
#footer-info li {
    line-height: 1.4}
#footer-places li {
    float: right;
    margin-left: 1em;
    line-height: 2}
}
@media print {
    .toc,body {
    padding: 10px;
    font-family: 'Linux Libertine','Georgia','Times',serif}
.printfooter,.mw-footer,.thumb,table,ol,dl,ul,h3,h4,h5,h6 {
    font-family: sans-serif}
img {
    font-family: 'Linux Libertine','Georgia','Times',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,h2 {
    overflow: hidden;
    border-bottom: 2px solid #000000}
h3,h4,h5,h6 {
    margin: 30px 0 0}
h2,h3,h4,h5,h6 {
    padding: 0;
    position: relative}
h2 {
    font-size: 18pt;
    line-height: 24pt;
    margin-bottom: 0.25em}
h3 {
    font-size: 14pt;
    line-height: 20pt}
h4,h5,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}
blockquote {
    border-right: 2px solid #000000;
    padding-right: 20px}
ol,ul {
    margin: 10px 1.6em 0 0;
    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-right: 30px}
.toc li.toclevel-1 > a {
    font-size: 12pt;
    font-weight: bold}
.mw-jump-link,.toc .tocnumber {
    display: none}
.printfooter {
    margin-top: 10px;
    border-top: 3px solid #000000;
    padding-top: 10px;
    font-size: 10pt;
    clear: both}
.mw-footer {
    margin-top: 12px;
    border-top: 1px solid #eeeeee;
    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}
#footer-info-lastmod {
    color: #000000;
    font-size: 12pt;
    font-weight: bold}
}
@media screen {
    body {
    background-color: #f8f9fa;
    color: #202122;
    overflow-y: scroll}
.mw-body,.parsoid-body {
    direction: rtl;
    padding: 1.25em 0.5em 1.5em}
.mw-body {
    border-top: 1px solid #a7d7f9;
    margin-top: -1px;
    padding: 1.25em 0.5em 1.5em}
.mw-body .firstHeading {
    overflow: visible}
.mw-header {
    min-height: 3.125em;
    margin: 0.625em 0 0.3125em;
    padding: 0.125em 0;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 4}
#p-search {
    float: right;
    margin: 0 2.85714286em 0 0;
    flex-grow: 1;
    z-index: 3;
    flex-basis: 10.71428571em}
#p-search > #searchform,#p-search .wvui-typeahead-search {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 0;
    max-width: 35.71428571em}
.mw-body,#mw-data-after-content,#left-navigation,.mw-footer {
    margin-right: 0}
.mw-indicators {
    z-index: 1}
.mw-body-header:after {
    clear: both;
    content: '';
    display: block}
.mw-body-header #p-lang-btn {
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 2em;
    margin-top: 0.17em}
.mw-body-content {
    position: relative;
    z-index: 0}
#mw-navigation h2 {
    position: absolute;
    top: -9999px}
.mw-article-toolbar-container {
    max-width: 60em;
    margin-right: auto;
    margin-left: auto}
.mw-article-toolbar-container:after {
    clear: both;
    content: '';
    display: block}
#left-navigation {
    float: right}
#right-navigation {
    float: left}
#p-personal {
    flex-grow: 1;
    flex-basis: 18.75em;
    margin-right: 2.85714286em;
    float: left}
#mw-sidebar-button {
    float: right;
    margin-right: -0.75em;
    margin-left: 0.75em}
#mw-panel {
    background-image: linear-gradient(to bottom,#ffffff 0%,#f8f9fa 10%,#f8f9fa 90%,#ffffff 100%);
    position: absolute;
    right: -1.875em;
    width: 11em;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px 0.8125em 40px 0;
    z-index: 1}
.parsoid-body {
    padding: 1.25em 0.5em 1.5em}
#p-namespaces {
    background-image: none;
    padding-right: 0}
.mw-footer {
    border-top: 1px solid #a2a9b1;
    padding: 0.75em}
.mw-page-container {
    min-width: 27.5em;
    max-width: 103.125em;
    min-height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0.05px 0.9375em;
    background-color: #ffffff}
.skin--responsive .mw-page-container {
    min-width: auto}
.mw-page-container-inner {
    position: relative}
.mw-workspace-container {
    max-width: 90em;
    margin-right: auto;
    margin-left: auto;
    position: relative}
.mw-workspace-container.mw-footer-container {
    position: static}
.mw-content-container {
    max-width: 60em;
    margin-right: auto;
    margin-left: auto}
.skin-vector-disable-max-width .mw-content-container {
    max-width: none}
.mw-sidebar-container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0}
.mw-footer-container {
    padding-top: 50px;
    padding-bottom: 82px}
#mw-sidebar-checkbox: not(: checked) ~ .mw-workspace-container .mw-sidebar {
    -webkit-transform: translateX(6.5625em);
    -ms-transform: translateX(6.5625em);
    transform: translateX(6.5625em)}
.skin-vector-disable-max-width .mw-checkbox-hack-checkbox: checked ~ .mw-workspace-container .mw-content-container {
    margin-right: 11.5em}
#simpleSearch.search-form__loader:after {
    content: attr(data-loading-msg);
    display: block;
    position: absolute;
    top: 100%;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #a2a9b1;
    border-top-width: 0;
    border-radius: 0 0 2px 2px;
    color: #72777d;
    font-size: 0.8em;
    padding: 0.4em;
    box-shadow: inset 0 0 0 1px transparent;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    z-index: 1;
    background: linear-gradient(90deg,#3366cc 100%,#3366cc 100%) -10% 0 / 0 2px no-repeat,#ffffff;
    animation: search-loader-progress-bar 1200ms linear 1000ms infinite alternate}
@keyframes search-loader-progress-bar {
    0% {
    background-size: 0 2px;
    background-position: -10% 0}
30% {
    background-size: 30% 2px;
    background-position: -10% 0}
70% {
    background-size: 30% 2px;
    background-position: -10% 0}
100% {
    background-size: 0 2px;
    background-position: -10% 0}
}
#p-search {
    font-size: 0.875em;
    font-size: calc(1em * 0.875)}
#searchInput,#searchButton,#mw-searchButton {
    font-size: inherit}
#searchInput {
    height: 2.28571429em}
#searchButton,#mw-searchButton {
    background-size: 1.42857143em auto}
.client-js .skin-vector-search-vue .wvui-typeahead-search__suggestion,.client-js .skin-vector-search-vue .wvui-typeahead-search__suggestions__footer {
    text-decoration: none}
.client-js .skin-vector-search-vue #searchform-suggestions li {
    margin-bottom: 0}
.client-js .skin-vector-search-vue #searchInput {
    padding-right: 2.57142857em;
    padding-left: 8px}
.client-js .skin-vector-search-vue #searchButton,.client-js .skin-vector-search-vue #mw-searchButton {
    pointer-events: none;
    left: auto;
    right: 1px;
    width: 2.57142857em}
.client-js .skin-vector-search-vue .wvui-input__input: not([disabled]) {
    -webkit-transition: none;
    transition: none}
.client-js .skin-vector-search-vue .p-search--show-thumbnail #searchInput:focus {
    position: relative;
    padding-right: calc(12px + 2.57142857em + 12px);
    width: calc(100% + 24px);
    right: calc(-1 * 24px)}
.client-js .skin-vector-search-vue .p-search--show-thumbnail #searchInput:focus ~ #searchButton,.client-js .skin-vector-search-vue .p-search--show-thumbnail #searchInput:focus ~ #mw-searchButton {
    right: -11px}
#mw-panel {
    font-size: inherit}
#mw-panel nav:first-child {
    background-image: none}
#mw-panel nav:first-child h3 {
    display: none}
#mw-panel nav:first-child .vector-menu-content {
    margin-right: 0.5em}
.mw-checkbox-hack-checkbox {
    display: none}
.mw-checkbox-hack-button {
    display: inline-block;
    cursor: pointer}
.mw-sidebar-action {
    margin: 8px 1.2em 8px 0.6em}
.mw-sidebar-action-link {
    font-size: 0.75em;
    font-weight: bold}
#mw-sidebar-button {
    min-width: 2.75em;
    min-height: 2.75em;
    width: 2.75em;
    height: 2.75em;
    border: 1px solid transparent;
    border-radius: 2px}
#mw-sidebar-button:before {
    min-width: 20px;
    min-height: 20px;
    height: 100%;
    margin: 0 0.75em;
    opacity: 0.67;
    background-image: url("data: image/svg+xml,%3Csvg xmlns=%22http: //www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E chevron %3C/title%3E %3Cpath d=%22M11 2 9.7 3.3l6.6 6.7-6.6 6.7L11 18l8-8zM2.5 2 1 3.3 7.8 10l-6.7 6.7L2.5 18l8-8z%22/%3E %3C/svg%3E")}
#mw-sidebar-checkbox: not(: checked) ~ .mw-header #mw-sidebar-button:before {
    background-image: url("data: image/svg+xml,%3Csvg xmlns=%22http: //www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E menu %3C/title%3E %3Cpath d=%22M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z%22/%3E %3C/svg%3E")}
#mw-sidebar-button:hover {
    background-color: rgba(0,24,73,0.02745098)}
#mw-sidebar-button:hover:before {
    opacity: 1}
#mw-sidebar-button:focus {
    border-color: #3366cc;
    outline: 0;
    box-shadow: inset 0 0 0 1px #3366cc}
#mw-sidebar-checkbox: not(: checked) ~ .mw-workspace-container .mw-sidebar {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%)}
.vector-animations-ready .mw-sidebar {
    -webkit-transition: transform 100ms ease-out,opacity 100ms ease-out,visibility 100ms ease-out;
    transition: transform 100ms ease-out,opacity 100ms ease-out,visibility 100ms ease-out}
.vector-animations-ready #mw-sidebar-button {
    -webkit-transition: background-color 100ms,border-color 100ms,box-shadow 100ms;
    transition: background-color 100ms,border-color 100ms,box-shadow 100ms}
.mw-body-header .mw-portlet-lang .mw-ui-icon:before {
    margin-left: 8px;
    opacity: 0.87}
.mw-body-header .mw-portlet-lang .vector-menu-heading {
    font-size: 0.875em;
    line-height: 1.493em;
    padding: 4px 8px 4px 30px;
    user-select: none;
    opacity: 1}
.mw-body-header .mw-portlet-lang .vector-menu-heading:after {
    top: 0}
.mw-body-header .mw-portlet-lang .vector-menu-content {
    top: auto;
    left: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-height: 65vh;
    overflow: scroll;
    border-top-width: 1px}
.mw-body-header .mw-portlet-lang .vector-menu-content li a {
    font-size: inherit}
.mw-body-header .mw-portlet-lang .after-portlet {
    margin-top: 10px}
.client-nojs .mw-portlet-lang:hover .vector-menu-heading,.client-nojs .vector-menu-checkbox: checked + .vector-menu-heading {
    border-radius: 0}
.client-js .mw-body-header .mw-interlanguage-selector {
    background-image: none}
.client-js .mw-body-header .vector-menu--hide-dropdown .vector-menu-checkbox,.client-js .mw-body-header .vector-menu--hide-dropdown .vector-menu-content {
    display: none}
}
@media screen and (min-width: 106.875em) {
    .mw-page-container {
    border-right: 1px solid #f8f9fa;
    border-left: 1px solid #f8f9fa}
}
@media screen and (max-width: 86.75em) {
    #p-search {
    width: 13.2em;
    width: 20vw;
    max-width: 100%}
.mw-checkbox-hack-checkbox: checked ~ .mw-workspace-container .mw-content-container,.mw-checkbox-hack-checkbox: checked ~ .mw-workspace-container .mw-article-toolbar-container {
    margin-right: 11.5em}
.vector-animations-ready .mw-sidebar {
    -webkit-transition: none;
    transition: none}
}
@media screen and (min-width: 93.75em) {
    #mw-panel {
    background: #ffffff;
    border-left: 1px solid #f8f9fa}
}
@media screen and (max-width: 78.67857143000001em) {
    #p-search > #searchform,#p-search .wvui-typeahead-search {
    margin-right: auto}
}
@media screen and (min-width: 720px) {
    #p-search {
    min-width: 25em}
.mw-page-container {
    padding-right: 1.875em;
    padding-left: 1.875em}
}
@media screen and (max-width: 720px) {
    .mw-checkbox-hack-checkbox: checked ~ .mw-workspace-container #mw-panel {
    width: 100%;
    position: relative;
    right: 0}
.mw-checkbox-hack-checkbox: checked ~ .mw-workspace-container .mw-content-container,.mw-checkbox-hack-checkbox: checked ~ .mw-workspace-container .mw-article-toolbar-container {
    margin-right: 0 !important}
}
@media screen and (max-width: 720px) {
    .vector-animations-ready .mw-sidebar {
    transition: none}
}
@media all {
    .mw-logo {
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    align-items: center}
.mw-logo-icon {
    float: right;
    margin-left: 10px}
.mw-logo-container {
    float: right}
.mw-logo-wordmark {
    display: block;
    margin: 0 auto;
    font-size: 1.4em}
.mw-logo-tagline {
    display: block;
    margin: 5px auto 0;
    font-size: 0.7em}
}
@media print {
    .mw-page-container-inner {
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: flex-start}
.mw-page-container-inner > * {
    width: 100%}
#mw-sidebar-checkbox,.mw-header > *: not(.mw-logo) {
    display: none}
.mw-header {
    order: 1}
.mw-workspace-container {
    order: 2}
}
@media screen {
    div.floatright,table.floatright {
    margin: 0 0 0.5em 0.5em}
div.tright,div.floatright,table.floatright {
    clear: right;
    float: right}
div.tleft,div.floatleft,table.floatleft {
    float: left;
    clear: left}
div.floatleft,table.floatleft {
    margin: 0 0.5em 0.5em 0}
div.thumb {
    margin-bottom: 0.5em;
    width: auto;
    background-color: transparent}
div.thumbinner {
    border: 1px solid #c8ccd1;
    padding: 3px;
    background-color: #f8f9fa;
    font-size: 94%;
    text-align: center;
    overflow: hidden}
.thumbimage {
    background-color: #ffffff;
    border: 1px solid #c8ccd1}
.thumbcaption {
    border: 0;
    line-height: 1.4em;
    padding: 3px;
    font-size: 94%;
    text-align: right}
.magnify {
    float: left;
    margin-right: 3px}
.magnify a {
    display: block;
    text-indent: 15px;
    white-space: nowrap;
    overflow: hidden;
    width: 15px;
    height: 11px;
    background-image: url(/w/resources/src/mediawiki.skinning/images/magnify-clip-rtl.png?a9fb3);
    background-image: linear-gradient(transparent,transparent),url(/w/resources/src/mediawiki.skinning/images/magnify-clip-rtl.svg?38fd5);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none}
.thumbborder {
    border: 1px solid #eaecf0}
.mw-content-ltr .thumbcaption {
    text-align: left}
.mw-content-ltr .magnify {
    float: right;
    margin-left: 3px;
    margin-right: 0}
.mw-content-ltr .magnify a {
    background-image: url(/w/resources/src/mediawiki.skinning/images/magnify-clip-ltr.png?4f704);
    background-image: linear-gradient(transparent,transparent),url(/w/resources/src/mediawiki.skinning/images/magnify-clip-ltr.svg?8330e)}
.mw-content-rtl .thumbcaption {
    text-align: right}
.mw-content-rtl .magnify {
    float: left;
    margin-left: 0;
    margin-right: 3px}
.mw-content-rtl .magnify a {
    background-image: url(/w/resources/src/mediawiki.skinning/images/magnify-clip-rtl.png?a9fb3);
    background-image: linear-gradient(transparent,transparent),url(/w/resources/src/mediawiki.skinning/images/magnify-clip-rtl.svg?38fd5)}
div.tright {
    margin: 0.5em 0 1.3em 1.4em}
div.tleft {
    margin: 0.5em 1.4em 1.3em 0}
.mw-parser-output:after {
    clear: both;
    content: '';
    display: block}
.mw-parser-output a.external.free {
    word-wrap: break-word}
.rtl .mw-parser-output a.external.free,.rtl .mw-parser-output a.external.autonumber {
    direction: ltr;
    unicode-bidi: embed}
.mw-hide-empty-elt .mw-parser-output .mw-empty-elt {
    display: none}
textarea {
    border: 1px solid #c8ccd1}
.usermessage {
    background-color: #ffce7b;
    border: 1px solid #ffa500;
    color: #000;
    font-weight: bold;
    margin: 2em 0 1em;
    padding: 0.5em 1em;
    vertical-align: middle}
#siteNotice {
    position: relative;
    text-align: center;
    margin: 0}
#localNotice {
    margin-bottom: 0.9em}
#siteSub {
    display: none}
#contentSub,#contentSub2 {
    font-size: 84%;
    line-height: 1.2em;
    margin: 0 1em 1.4em 0;
    color: #54595d;
    width: auto}
span.subpages {
    display: block}
.emptyPortlet {
    display: none}
.printfooter,.client-nojs #t-print {
    display: none}
.mw-indicators {
    float: left}
.mw-editsection {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none}
.mw-editsection,.mw-editsection-like {
    font-size: small;
    font-weight: normal;
    margin-right: 1em;
    vertical-align: baseline;
    line-height: 1em}
.mw-content-ltr .mw-editsection,.mw-content-rtl .mw-content-ltr .mw-editsection {
    margin-left: 1em}
.mw-content-rtl .mw-editsection,.mw-content-ltr .mw-content-rtl .mw-editsection {
    margin-right: 1em}
a {
    text-decoration: none;
    color: #0645ad;
    background: none}
a: not([href]) {
    cursor: pointer}
a:visited {
    color: #0b0080}
a:active {
    color: #faa700}
a:hover,a:focus {
    text-decoration: underline}
a:lang(ar),a:lang(kk-arab),a:lang(mzn),a:lang(ps),a:lang(ur) {
    text-decoration: none}
a.stub {
    color: #723}
a.new,#p-personal a.new {
    color: #d33}
a.mw-selflink {
    color: inherit;
    font-weight: bold;
    text-decoration: inherit}
a.mw-selflink:hover {
    cursor: inherit;
    text-decoration: inherit}
a.mw-selflink:active,a.mw-selflink:visited {
    color: inherit}
a.new:visited,#p-personal a.new:visited {
    color: #a55858}
.mw-parser-output a.extiw,.mw-parser-output a.external {
    color: #36b}
.mw-parser-output a.extiw:visited,.mw-parser-output a.external:visited {
    color: #636}
.mw-parser-output a.extiw:active,.mw-parser-output a.external:active {
    color: #b63}
.mw-underline-always a {
    text-decoration: underline}
.mw-underline-never a {
    text-decoration: none}
.plainlinks a.external {
    background: none !important;
    padding: 0 !important}
img {
    border: 0;
    vertical-align: middle}
hr {
    height: 1px;
    background-color: #a2a9b1;
    border: 0;
    margin: 0.2em 0}
h1,h2,h3,h4,h5,h6 {
    color: #000;
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    overflow: hidden}
h1,h2 {
    margin-bottom: 0.6em;
    border-bottom: 1px solid #a2a9b1}
h3,h4,h5 {
    margin-bottom: 0.3em}
h1 {
    font-size: 188%;
    font-weight: normal}
h2 {
    font-size: 150%;
    font-weight: normal}
h3 {
    font-size: 128%}
h4 {
    font-size: 116%}
h5 {
    font-size: 108%}
h6 {
    font-size: 100%}
p {
    margin: 0.4em 0 0.5em 0}
p img {
    margin: 0}
ul {
    margin: 0.3em 1.6em 0 0;
    padding: 0}
ol {
    margin: 0.3em 3.2em 0 0;
    padding: 0;
    list-style-image: none}
li {
    margin-bottom: 0.1em}
dt {
    font-weight: bold;
    margin-bottom: 0.1em}
dl {
    margin-top: 0.2em;
    margin-bottom: 0.5em}
dd {
    margin-right: 1.6em;
    margin-bottom: 0.1em}
pre,code,tt,kbd,samp,.mw-code {
    font-family: monospace,monospace}
pre,code,.mw-code {
    background-color: #f8f9fa;
    color: #000;
    border: 1px solid #eaecf0}
code {
    border-radius: 2px;
    padding: 1px 4px}
pre,.mw-code {
    padding: 1em;
    white-space: pre-wrap;
    overflow-x: hidden;
    word-wrap: break-word}
table {
    font-size: 100%}
fieldset {
    border: 1px solid #2a4b8d;
    margin: 1em 0 1em 0;
    padding: 0 1em 1em}
legend {
    padding: 0.5em;
    font-size: 95%}
form {
    border: 0;
    margin: 0}
textarea {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 0.1em}
.center {
    width: 100%;
    text-align: center}
*.center * {
    margin-right: auto;
    margin-left: auto}
.small {
    font-size: 94%}
table.small {
    font-size: 100%}
.mw-content-ltr {
    direction: ltr}
.mw-content-rtl {
    direction: rtl}
.sitedir-ltr textarea,.sitedir-ltr input,textarea[dir='ltr'][dir='ltr'],input[dir='ltr'][dir='ltr'] {
    direction: ltr}
.sitedir-rtl textarea,.sitedir-rtl input,textarea[dir='rtl'][dir='rtl'],input[dir='rtl'][dir='rtl'] {
    direction: rtl}
.mw-userlink {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    unicode-bidi: embed}
mark {
    background-color: #ff0;
    color: #000}
wbr {
    display: inline-block}
input[type='submit'],input[type='button'],input[type='reset'],input[type='file'] {
    direction: rtl}
abbr[title],.explain[title] {
    border-bottom: 1px dotted;
    cursor: help}
@supports (text-decoration: underline dotted) {
    abbr[title],.explain[title] {
    border-bottom: 0;
    text-decoration: underline dotted}
}
span.comment {
    font-style: italic;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate}
li span.deleted,span.history-deleted {
    text-decoration: line-through;
    color: #72777d;
    font-style: italic}
td.mw-label {
    text-align: left;
    vertical-align: middle}
td.mw-input {
    text-align: right}
td.mw-submit {
    text-align: right;
    white-space: nowrap}
div.floatright,table.floatright {
    margin: 0 0 0.5em 0.5em}
div.tright,div.floatright,table.floatright {
    clear: right;
    float: right}
div.tleft,div.floatleft,table.floatleft {
    float: left;
    clear: left}
div.floatleft,table.floatleft {
    margin: 0 0.5em 0.5em 0}
div.thumb {
    margin-bottom: 0.5em;
    width: auto;
    background-color: transparent}
div.thumbinner {
    border: 1px solid #c8ccd1;
    padding: 3px;
    background-color: #f8f9fa;
    font-size: 94%;
    text-align: center;
    overflow: hidden}
.thumbimage {
    background-color: #ffffff;
    border: 1px solid #c8ccd1}
.thumbcaption {
    border: 0;
    line-height: 1.4em;
    padding: 3px;
    font-size: 94%;
    text-align: right}
.magnify {
    float: left;
    margin-right: 3px}
.magnify a {
    display: block;
    text-indent: 15px;
    white-space: nowrap;
    overflow: hidden;
    width: 15px;
    height: 11px;
    background-image: url(/w/resources/src/mediawiki.skinning/images/magnify-clip-rtl.png?a9fb3);
    background-image: linear-gradient(transparent,transparent),url(/w/resources/src/mediawiki.skinning/images/magnify-clip-rtl.svg?38fd5);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none}
.thumbborder {
    border: 1px solid #eaecf0}
.mw-content-ltr .thumbcaption {
    text-align: left}
.mw-content-ltr .magnify {
    float: right;
    margin-left: 3px;
    margin-right: 0}
.mw-content-ltr .magnify a {
    background-image: url(/w/resources/src/mediawiki.skinning/images/magnify-clip-ltr.png?4f704);
    background-image: linear-gradient(transparent,transparent),url(/w/resources/src/mediawiki.skinning/images/magnify-clip-ltr.svg?8330e)}
.mw-content-rtl .thumbcaption {
    text-align: right}
.mw-content-rtl .magnify {
    float: left;
    margin-left: 0;
    margin-right: 3px}
.mw-content-rtl .magnify a {
    background-image: url(/w/resources/src/mediawiki.skinning/images/magnify-clip-rtl.png?a9fb3);
    background-image: linear-gradient(transparent,transparent),url(/w/resources/src/mediawiki.skinning/images/magnify-clip-rtl.svg?38fd5)}
div.tright {
    margin: 0.5em 0 1.3em 1.4em}
div.tleft {
    margin: 0.5em 1.4em 1.3em 0}
#catlinks {
    text-align: right}
.catlinks {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    padding: 5px;
    margin-top: 1em;
    clear: both}
.catlinks ul {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none none}
.catlinks li {
    display: inline-block;
    line-height: 1.25em;
    border-right: 1px solid #a2a9b1;
    margin: 0.125em 0;
    padding: 0 0.5em}
.catlinks li:first-child {
    padding-right: 0.25em;
    border-right: 0}
.catlinks li a.mw-redirect {
    font-style: italic}
.mw-hidden-cats-hidden,.catlinks-allhidden {
    display: none}
#mw-credits a {
    unicode-bidi: embed}
#mw-clearyourcache {
    direction: rtl;
    unicode-bidi: embed}
div.patrollink {
    font-size: 75%;
    text-align: left}
#mw-revision-info,#mw-revision-info-current,#mw-revision-nav {
    direction: rtl}
p.mw-protect-editreasons,p.mw-filedelete-editreasons,p.mw-delete-editreasons {
    font-size: 90%;
    text-align: left}
.autocomment,.autocomment a,.autocomment a:visited {
    color: #72777d}
span.mw-revdelundel-link,strong.mw-revdelundel-link {
    font-size: 90%}
span.mw-revdelundel-hidden,input.mw-revdelundel-hidden {
    visibility: hidden}
a.new {
    color: #ba0000}
.wikitable {
    background-color: #f8f9fa;
    color: #202122;
    margin: 1em 0;
    border: 1px solid #a2a9b1;
    border-collapse: collapse}
.wikitable > tr > th,.wikitable > tr > td,.wikitable > * > tr > th,.wikitable > * > tr > td {
    border: 1px solid #a2a9b1;
    padding: 0.2em 0.4em}
.wikitable > tr > th,.wikitable > * > tr > th {
    background-color: #eaecf0;
    text-align: center}
.wikitable > caption {
    font-weight: bold}
.error,.warning,.success {
    font-size: larger}
.error {
    color: #d33}
.warning {
    color: #ac6600}
.success {
    color: #14866d}
.mw-infobox {
    border: 2px solid #fc3;
    margin: 0.5em;
    clear: right;
    overflow: hidden}
.mw-infobox-left {
    margin: 7px;
    float: right;
    width: 35px}
.mw-infobox-right {
    margin: 0.5em 49px 0.5em 0.5em}
.visualClear {
    clear: both}
.mw-datatable {
    border: 1px solid #a2a9b1;
    border-collapse: collapse}
.mw-datatable td,.mw-datatable th {
    border: 1px solid #a2a9b1;
    padding: 0.2em 0.4em}
.mw-datatable th {
    background-color: #eaeeff}
.mw-datatable td {
    background-color: #fff}
.mw-datatable tr:hover td {
    background-color: #eaf3ff}
.mw-ajax-loader {
    background-image: url(/w/resources/src/mediawiki.skinning/images/ajax-loader.gif?57f34);
    background-position: center center;
    background-repeat: no-repeat;
    padding: 16px;
    position: relative;
    top: -16px}
.mw-small-spinner {
    padding: 10px !important;
    margin-left: 0.6em;
    background-image: url(/w/resources/src/mediawiki.skinning/images/spinner.gif?ca65b);
    background-position: center center;
    background-repeat: no-repeat}
.mw-content-ltr ul,.mw-content-rtl .mw-content-ltr ul {
    margin: 0.3em 0 0 1.6em;
    padding: 0}
.mw-content-rtl ul,.mw-content-ltr .mw-content-rtl ul {
    margin: 0.3em 1.6em 0 0;
    padding: 0}
.mw-content-ltr ol,.mw-content-rtl .mw-content-ltr ol {
    margin: 0.3em 0 0 3.2em;
    padding: 0}
.mw-content-rtl ol,.mw-content-ltr .mw-content-rtl ol {
    margin: 0.3em 3.2em 0 0;
    padding: 0}
.mw-content-ltr dd,.mw-content-rtl .mw-content-ltr dd {
    margin-left: 1.6em;
    margin-right: 0}
.mw-content-rtl dd,.mw-content-ltr .mw-content-rtl dd {
    margin-right: 1.6em;
    margin-left: 0}
h1:lang(anp),h1:lang(as),h1:lang(bh),h1:lang(bho),h1:lang(bn),h1:lang(gu),h1:lang(hi),h1:lang(kn),h1:lang(ks),h1:lang(ml),h1:lang(mr),h1:lang(my),h1:lang(mai),h1:lang(ne),h1:lang(new),h1:lang(or),h1:lang(pa),h1:lang(pi),h1:lang(sa),h1:lang(ta),h1:lang(te) {
    line-height: 1.6em !important}
h2:lang(anp),h3:lang(anp),h4:lang(anp),h5:lang(anp),h6:lang(anp),h2:lang(as),h3:lang(as),h4:lang(as),h5:lang(as),h6:lang(as),h2:lang(bho),h3:lang(bho),h4:lang(bho),h5:lang(bho),h6:lang(bho),h2:lang(bh),h3:lang(bh),h4:lang(bh),h5:lang(bh),h6:lang(bh),h2:lang(bn),h3:lang(bn),h4:lang(bn),h5:lang(bn),h6:lang(bn),h2:lang(gu),h3:lang(gu),h4:lang(gu),h5:lang(gu),h6:lang(gu),h2:lang(hi),h3:lang(hi),h4:lang(hi),h5:lang(hi),h6:lang(hi),h2:lang(kn),h3:lang(kn),h4:lang(kn),h5:lang(kn),h6:lang(kn),h2:lang(ks),h3:lang(ks),h4:lang(ks),h5:lang(ks),h6:lang(ks),h2:lang(ml),h3:lang(ml),h4:lang(ml),h5:lang(ml),h6:lang(ml),h2:lang(mr),h3:lang(mr),h4:lang(mr),h5:lang(mr),h6:lang(mr),h2:lang(my),h3:lang(my),h4:lang(my),h5:lang(my),h6:lang(my),h2:lang(mai),h3:lang(mai),h4:lang(mai),h5:lang(mai),h6:lang(mai),h2:lang(ne),h3:lang(ne),h4:lang(ne),h5:lang(ne),h6:lang(ne),h2:lang(new),h3:lang(new),h4:lang(new),h5:lang(new),h6:lang(new),h2:lang(or),h3:lang(or),h4:lang(or),h5:lang(or),h6:lang(or),h2:lang(pa),h3:lang(pa),h4:lang(pa),h5:lang(pa),h6:lang(pa),h2:lang(pi),h3:lang(pi),h4:lang(pi),h5:lang(pi),h6:lang(pi),h2:lang(sa),h3:lang(sa),h4:lang(sa),h5:lang(sa),h6:lang(sa),h2:lang(ta),h3:lang(ta),h4:lang(ta),h5:lang(ta),h6:lang(ta),h2:lang(te),h3:lang(te),h4:lang(te),h5:lang(te),h6:lang(te) {
    line-height: 1.4em}
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(or) li {
    list-style-type: oriya}
.toc .toctitle {
    direction: rtl}
.mw-content-ltr .toc ul,.mw-content-rtl .mw-content-ltr .toc ul {
    text-align: left}
.mw-content-rtl .toc ul,.mw-content-ltr .mw-content-rtl .toc ul {
    text-align: right}
.mw-content-ltr .toc ul ul,.mw-content-rtl .mw-content-ltr .toc ul ul {
    margin: 0 0 0 2em}
.mw-content-rtl .toc ul ul,.mw-content-ltr .mw-content-rtl .toc ul ul {
    margin: 0 2em 0 0}
.printfooter {
    display: none}
.xdebug-error {
    position: absolute;
    z-index: 99}
.mw-editsection {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none}
.mw-editsection,.mw-editsection-like {
    font-size: small;
    font-weight: normal;
    margin-right: 1em;
    vertical-align: baseline;
    line-height: 1em}
.mw-content-ltr .mw-editsection,.mw-content-rtl .mw-content-ltr .mw-editsection {
    margin-left: 1em}
.mw-content-rtl .mw-editsection,.mw-content-ltr .mw-content-rtl .mw-editsection {
    margin-right: 1em}
sup,sub {
    line-height: 1}
.toc,.toccolours {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    padding: 5px;
    font-size: 95%}
.toc {
    display: table;
    padding: 7px}
.toc h2 {
    display: inline;
    border: 0;
    padding: 0;
    font-size: 100%;
    font-weight: bold}
.toc .toctitle {
    text-align: center}
.toc ul {
    list-style-type: none;
    list-style-image: none;
    margin: 0.3em 0;
    padding: 0;
    text-align: right}
.toc ul ul {
    margin: 0 2em 0 0}
table.toc {
    border-collapse: collapse}
table.toc td {
    padding: 0}
.tocnumber,.toctext {
    display: table-cell;
    text-decoration: inherit}
.tocnumber {
    color: #202122;
    padding-right: 0;
    padding-left: 0.5em}
.mw-content-ltr .tocnumber {
    padding-right: 0;
    padding-left: 0.5em}
.mw-content-rtl .tocnumber {
    padding-right: 0.5em;
    padding-left: 0}
: not(: checked) > .toctogglecheckbox {
    display: inline !important;
    position: absolute;
    opacity: 0;
    z-index: -1}
.toctogglespan {
    font-size: 94%}
: not(: checked) > .toctogglespan:before {
    content: ' ['}
: not(: checked) > .toctogglespan:after {
    content: ']'}
.toctogglelabel {
    cursor: pointer;
    color: #0645ad}
.toctogglelabel:hover {
    text-decoration: underline}
.toctogglecheckbox:focus + .toctitle .toctogglelabel {
    text-decoration: underline;
    outline: dotted 1px;
    outline: auto -webkit-focus-ring-color}
.toctogglecheckbox: checked + .toctitle .toctogglelabel:after {
    content: 'نمایش'}
.toctogglecheckbox: not(: checked) + .toctitle .toctogglelabel:after {
    content: 'نهفتن'}
.toc .toctitle {
    direction: rtl}
.mw-content-ltr .toc ul,.mw-content-rtl .mw-content-ltr .toc ul {
    text-align: left}
.mw-content-rtl .toc ul,.mw-content-ltr .mw-content-rtl .toc ul {
    text-align: right}
.mw-content-ltr .toc ul ul,.mw-content-rtl .mw-content-ltr .toc ul ul {
    margin: 0 0 0 2em}
.mw-content-rtl .toc ul ul,.mw-content-ltr .mw-content-rtl .toc ul ul {
    margin: 0 2em 0 0}
}
@media print {
    table.floatright,div.floatright,div.tright {
    float: right;
    clear: right}
table.floatleft,div.floatleft,div.tleft {
    float: left;
    clear: left}
div.tleft {
    margin: 0.5em 1.4em 1.3em 0}
div.tright {
    margin: 0.5em 0 1.3em 1.4em}
table.floatright,div.floatright {
    margin: 0 0 0.5em 0.5em;
    border: 0}
table.floatleft,div.floatleft {
    margin: 0 0.5em 0.5em 0;
    border: 0}
div.thumb {
    background-color: transparent;
    width: auto}
div.thumb a {
    border-bottom: 0}
div.thumbinner {
    background-color: #fff;
    border: 0;
    border-radius: 2px;
    padding: 5px;
    font-size: 10pt;
    color: #666;
    text-align: center;
    overflow: hidden;
    min-width: 100px}
.thumbcaption {
    text-align: right;
    line-height: 1.4;
    padding: 3px}
.thumbborder {
    border: 1pt solid #ddd}
.thumb {
    page-break-inside: avoid}
.magnify {
    display: none}
.mw-parser-output a.external {
}
.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) ')'}
.mw-editsection,.mw-editsection-like,.mw-indicators,#siteNotice,.usermessage {
    display: none}
.printfooter {
    padding: 1em 0}
.center {
    text-align: center}
a {
    background: none !important;
    padding: 0 !important}
a,a.external,a.new,a.stub {
    color: inherit !important;
    text-decoration: inherit !important}
dt {
    font-weight: bold}
h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    page-break-after: avoid;
    page-break-before: avoid}
p {
    margin: 1em 0;
    line-height: 1.2;
    orphans: 3;
    widows: 3}
img,figure {
    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;
    overflow-x: hidden;
    word-wrap: break-word}
ul {
    list-style-type: square}
.noprint,.mw-cite-backlink,.mw-redirectedfrom,.patrollink,#column-one,#footer-places,#mw-navigation,#f-poweredbyico,#f-copyrightico,li#about,li#disclaimer,li#mobileview,li#privacy {
    display: none}
body {
    background: #fff;
    color: #000;
    margin: 0;
    padding: 0}
.mw-parser-output a.external {
}
.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) ')'}
sup,sub {
    line-height: 1}
#globalWrapper {
    width: 100% !important;
    min-width: 0 !important}
.mw-body {
    background: #fff;
    color: #000;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    direction: rtl}
#column-content {
    margin: 0 !important}
#column-content .mw-body {
    padding: 1em;
    margin: 0 !important}
.center {
    text-align: center}
a {
    background: none !important;
    padding: 0 !important}
a,a.external,a.new,a.stub {
    color: inherit !important;
    text-decoration: inherit !important}
dt {
    font-weight: bold}
h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    page-break-after: avoid;
    page-break-before: avoid}
p {
    margin: 1em 0;
    line-height: 1.2;
    orphans: 3;
    widows: 3}
img,figure {
    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;
    overflow-x: hidden;
    word-wrap: break-word}
ul {
    list-style-type: square}
table.floatright,div.floatright,div.tright {
    float: right;
    clear: right}
table.floatleft,div.floatleft,div.tleft {
    float: left;
    clear: left}
div.tleft {
    margin: 0.5em 1.4em 1.3em 0}
div.tright {
    margin: 0.5em 0 1.3em 1.4em}
table.floatright,div.floatright {
    margin: 0 0 0.5em 0.5em;
    border: 0}
table.floatleft,div.floatleft {
    margin: 0 0.5em 0.5em 0;
    border: 0}
div.thumb {
    background-color: transparent;
    width: auto}
div.thumb a {
    border-bottom: 0}
div.thumbinner {
    background-color: #fff;
    border: 0;
    border-radius: 2px;
    padding: 5px;
    font-size: 10pt;
    color: #666;
    text-align: center;
    overflow: hidden;
    min-width: 100px}
.thumbcaption {
    text-align: right;
    line-height: 1.4;
    padding: 3px}
.thumbborder {
    border: 1pt solid #ddd}
.thumb {
    page-break-inside: avoid}
.magnify {
    display: none}
.wikitable {
    background: #fff;
    margin: 1em 0;
    border: 1pt solid #aaa;
    border-collapse: collapse;
    font-size: 10pt;
    page-break-inside: avoid}
.wikitable > caption {
    padding: 5px;
    font-size: 10pt}
.wikitable > tr > th,.wikitable > tr > td,.wikitable > * > tr > th,.wikitable > * > tr > td {
    background: #fff !important;
    color: #000 !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}
.catlinks ul {
    display: inline;
    padding: 0;
    list-style: none none}
.catlinks li {
    display: inline-block;
    line-height: 1.15;
    margin: 0.1em 0;
    border-right: 1pt solid #aaa;
    padding: 0 0.4em}
.catlinks li:first-child {
    border-right: 0;
    padding-right: 0.2em}
.mw-hidden-catlinks,.catlinks {
    display: none}
.printfooter {
    padding: 1em 0}
#footer {
    background: #fff;
    color: #000;
    margin-top: 1em;
    border-top: 1pt solid #aaa;
    padding-top: 5px;
    direction: rtl}
.toctogglecheckbox: checked + .toctitle {
    display: none}
.toc {
    background-color: #f9f9f9;
    border: 1pt solid #aaa;
    padding: 5px;
    display: table}
.tocnumber,.toctext {
    display: table-cell}
.tocnumber {
    padding-right: 0;
    padding-left: 0.5em}
.mw-content-ltr .tocnumber {
    padding-left: 0;
    padding-right: 0.5em}
.mw-content-rtl .tocnumber {
    padding-left: 0.5em;
    padding-right: 0}
}

Change 680773 had a related patch set uploaded (by Huji; author: Huji):

[mediawiki/core@master] [WIP] @noflip does not work when used in nested LESS\n\nBug:T280428

https://gerrit.wikimedia.org/r/680773

The above patch fixes the issue. However, the fact that this issue emerged recently while the LESS file in question had not been edited since 2020-12-09 is troubling. It seems like @noflip was formerly parsed if it was inside a nested LESS syntax but it has stopped working recently. Therefore, I propose *not* merging the patch, but identifying and fixing the root cause of the problem instead.

After reviewing other LESS code in MediaWiki code base, I came to the conclusion that the appropriate way to use @noflip in nested contexts is to specify it before each directional declaration, and not before the selector. I amended the patch so that it would make this correction.

Update: We even have documentation for it! https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#LESS reads "@noflip tags must be on the line immediately above the declaration, as shown in the example above." The LESS file did not follow this; the patch fixes that.

Krinkle added subscribers: Jdlrobson, Krinkle.

As I look at the output of https://fa.wikipedia.org/w/load.php?lang=fa&only=styles&skin=vector&modules=skins.vector.icons%2Cstyles which I have pasted below […]

CSS output
@import '/srv/mediawiki/php-1.37.0-wmf.1/resources/src/mediawiki.skinning/toc/print.css';
.mw-ui-icon-wikimedia-language:before {

[…]

This looks very broken. There are server-side filesystem paths there in a client-side @import statement. This presumably means the print styles are missing. I wonder what else is broken.

@Krinkle good catch! Somehow I was blind to it.

Should we still proceed with the patch (knowing that we have uncovered a second, more important problem)? After all, the piece of documentation I linked above specifies that the @noflips should be right before the declaration so even if it somehow worked before, it was still non-compliant.

@Huji I presume this bug is significant enough to require backporting to the 1.36 release since it breaks RTL display of a prominent UI element. Is this a good presumption to make?

@Jdlrobson yes.

If you find it helpful, I can try to walk back the git history and find out about what time this started to happen, e.g. so that you would know if backporting to 1.35 would be needed or not.

Jdlrobson raised the priority of this task from Medium to High.Apr 20 2021, 6:27 PM
Jdlrobson added a project: MW-1.36-release.

Bumping priority then and tagging appropriately. Thanks!

This is the git version in which the issue first occured: rMWc504f19f1faa6f59acda1ac50c24d74d3c92985e

The version before it works just fine.

rMWb177d3f64a82 should resolve the issue originally reported above. However, I think this task should stay open, not only because backports to 1.36 are needed (@Jdforrester-WMF would you take care of that, or do you want me to do the cherrypicks?) but also because of the second and more important issue still being unresolved, i.e. the internal server paths being sent to the client (T280428#7012326)

Change 681971 had a related patch set uploaded (by Jforrester; author: Huji):

[mediawiki/core@REL1_36] @noflip should be specified before each directional statement

https://gerrit.wikimedia.org/r/681971

rMWb177d3f64a82 should resolve the issue originally reported above. However, I think this task should stay open, not only because backports to 1.36 are needed (@Jdforrester-WMF would you take care of that, or do you want me to do the cherrypicks?)

Done, I think?

but also because of the second and more important issue still being unresolved, i.e. the internal server paths being sent to the client (T280428#7012326)

Let's make that a different task, as this one is an implicitly-UBN blocker to the RC.0 cut.

Change 681971 merged by jenkins-bot:

[mediawiki/core@REL1_36] @noflip should be specified before each directional statement

https://gerrit.wikimedia.org/r/681971

Jdforrester-WMF assigned this task to Huji.

but also because of the second and more important issue still being unresolved, i.e. the internal server paths being sent to the client (T280428#7012326)

Let's make that a different task, as this one is an implicitly-UBN blocker to the RC.0 cut.

That begs the question: is the fact that server paths are being leaked to the client side, a big enough issue to be a blocker for RC.0 cut?

We should split the task, but maybe we should make that one a blocker too?

That begs the question: is the fact that server paths are being leaked to the client side, a big enough issue to be a blocker for RC.0 cut?

We should split the task, but maybe we should make that one a blocker too?

I'm not in Security, so don't take my word as gospel, but I believe we've ruled before that this is not considered an info leak for MediaWiki, as everything in MW is designed around that being open and isn't plausibly hideable. (The problem is not an infoleak, it's that those paths are meaningless to clients and so won't work.)