dev

Note: After publishing, you may have to bypass your browser's cache to see the changes. 

/***
  This stylesheet tries to fix various issues with RTL directionning on Fandom
***/

/*
     General notes about how directionning works in MediaWiki:
    ===========================================================
    
    * "User interface direction" is determined by the user's chosen language,
      which in turn is chosen by one of the followings:
      ** ?uselang= URL parameter
      ** Chosen language on user Preferences
      ** Defaults to the wiki's content language (this is mostly relevant to
         users who are not logged-in)
    
    * "Content direction" is determined by the page's content language, which
      usually matches the wiki's language.
    
    The general layout of the web page (the site interface) matches the
    direction of the user language. This is reflected in the <html> tag
    attributes [lang="..."] and [dir="ltr/rtl"], and in the <body> tag by the
    class .ltr / .rtl
    
    The direction of the content area matches the content language, using the
    wrapper
    <div id="mw-content-text" lang="..." dir="ltr/rtl" class="mw-content-ltr/rtl">
    A similar wrapper (without the id) can be added manually to sections on the
    page.
    
    The wiki's language direction is also reflected in the <body> tag by the
    class .sitedir-ltr / .sitedir-rtl
    
    MediaWiki's ResourceLoader also implements CSSJanus, which applies "smart"
    flipping to all stylesheets when user language direction is RTL. This means
    for example that all CSS declarations about padding-left: would turn into
    padding-right: . That feature is helpful in general but sometimes causes
    undesired results.
    Particular CSS declarations or CSS rules can be excluded from auto-flipping
    by adding a comment with @noflip immediately above - see examples in this
    stylesheet.
    
    RTL languages supported on Fandom are Arabic (ar), Hebrew (he) and Persian (fa)
*/


/* Deflipping the <body> element and the .main-container, then reflipping their
   child elements. Works around some broken layout issues, mainly Fandom or
   MediaWiki issues but one is also a Chromium bug - see
   https://bugs.chromium.org/p/chromium/issues/detail?id=1279142
*/

/* @noflip */
body.rtl,
body.rtl > .main-container {
    direction: ltr;
}

/* @noflip */
body.rtl > *,
body.rtl > .main-container > * {
    direction: rtl;
}

@media screen and (max-width:799px) { /* min-width of .main-container is 702px */
/* @noflip */
    body.rtl > .main-container {
        padding-right: 66px;
    }
}

/*  Working around a CSSJanus bug, where the terms "left" and "right" in CSS
    variables are replaced in variable assignment but not in variable usage.
    See https://github.com/cssjanus/cssjanus/issues/88
*/
/* @noflip */
body.rtl .page__right-rail {
    --right-rail-background-color: var(--left-rail-background-color);
}

/* @noflip */
body.rtl .right-rail-wrapper {
	--right-rail-text-color: var(--left-rail-text-color);
	--right-rail-text-color--rgb: var(--left-rail-text-color--rgb);
}

/* Fixing broken main page sliders
*/
/* @noflip */
body.rtl .wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider {
	right: initial;
	left: 0;
}

/* Fixing misdirectioned arrows on naviagtion dropdowns and right rail
*/
body.rtl .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-nested .wds-dropdown-chevron,
body.rtl .right-rail-toggle .wds-icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

body.rtl .is-rail-hidden .right-rail-toggle .wds-icon {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

/*
    Elements that are part of page content should be layouted according to
    content direction, rather than according to user interface direction. This
    includes Tables of Contents, Infoboxes, etc.
*/

/* @noflip */
body, /* so that no variable is ever undefined */
.mw-content-ltr,
.ve-ce-rootNode[dir="ltr"] {
    --toc-rmargin: auto;
    --toc-lmargin: 0;
    --toc-ul-rpadding: 12px;
    --toc-ul-lpadding: 0;
    --toc-li-rmargin: 0;
    --toc-li-lmargin: 12px;
    --ol_ul-rmargin: 0;
    --ol_ul-lmargin: 36px;
    --dd-rmargin: 0;
    --dd-lmargin: 24px;
	--pi-float: right;
	--pi-rmargin: 0;
	--pi-lmargin: 18px;
}

/* Table of contents */
/* @noflip */
body.sitedir-rtl,
.mw-content-rtl,
.ve-ce-rootNode[dir="rtl"] {
    --toc-rmargin: 0;
    --toc-lmargin: auto;
    --toc-ul-rpadding: 0;
    --toc-ul-lpadding: 12px;
    --toc-li-rmargin: 12px;
    --toc-li-lmargin: 0;
    --ol_ul-rmargin: 36px;
    --ol_ul-lmargin: 0;
    --dd-rmargin: 24px;
    --dd-lmargin: 0;
	--pi-float: left;
	--pi-rmargin: 18px;
	--pi-lmargin: 0;
}

/* @noflip */
.toc {
    margin-right: var(--toc-rmargin);
    margin-left: var(--toc-lmargin);
}

/* @noflip */
.toc > ul {
    padding-right: var(--toc-ul-rpadding);
    padding-left: var(--toc-ul-lpadding);
}

/* @noflip */
.toc ul li {
    margin-right: var(--toc-li-rmargin);
    margin-left: var(--toc-li-lmargin);
}

/* Misc; affects TOC too */
/* @noflip */
.page-content ol,.page-content ul {
    margin-right: var(--ol_ul-rmargin);
    margin-left: var(--ol_ul-lmargin);
}

/* @noflip */
.page-content dd {
    margin-right: var(--dd-rmargin);
    margin-left: var(--dd-lmargin);
}

/* Portable infoboxes */
/* @noflip */
.portable-infobox:where( /* excluding Dev install boxes */
:not(body.wiki-dev .pi-theme-install)) {
	clear: var(--pi-float, right);
	float: var(--pi-float, right);
	margin-right: var(--pi-rmargin);
	margin-left: var(--pi-lmargin);
}

.sitenotice__content {
	text-align: start;
}

/* Main page columns */
/* @noflip */
.mw-content-ltr .main-page-tag-lcs-exploded {
	float: left;
}

/* @noflip */
.mw-content-ltr .main-page-tag-rcs {
	clear: right;
	float: right;
}

/* @noflip */
.mw-content-rtl .main-page-tag-lcs-exploded {
	float: right;
}

/* @noflip */
.mw-content-rtl .main-page-tag-rcs {
	clear: left;
	float: left;
}