MediaWiki:Mobile.css

/**
You are editing the global css file for all mobile site users.
With Great Power Comes Great Responsibility.

Some words of caution:
* Avoid any changes which impact layout on a mobile device.
** Please be careful not to introduce any margin / padding rules. These should be done inside the template itself via an inline style.
** Be especially cautious when a template is likely to be used within the top 480px of the screen (the content that the user will see first on a mobile device)
* Do not use display:none. Instead edit the template and markup the element you want to hide with the `nomobile` class.
* Try to keep rules as generic and minimal as possible. Do not have 2 selectors doing the same thing. Introduce a common class and use that instead
* For big changes consult the [https://grafana.wikimedia.org/dashboard/db/mobile-2g grafana dashboard] to ensure you don't introduce any performance regressions.
* Group common css rules together where possible.
*/

/* Style for horizontal lists (separator following item).
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 6 (2014-05-09)
   @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}
/* Generate interpuncts */
#content .hlist dt:after {
    content: ": ";
}
#content .hlist dd:after,
#content .hlist li:after {
    content: " · ";
    font-weight: bold;
}
#content .hlist dd:last-child:after,
#content .hlist dt:last-child:after,
#content .hlist li:last-child:after {
    content: none;
}
/* Add parentheses around nested lists */
#content .hlist dd dd:first-child:before, #content .hlist dd dt:first-child:before, #content .hlist dd li:first-child:before,
#content .hlist dt dd:first-child:before, #content .hlist dt dt:first-child:before, #content .hlist dt li:first-child:before,
#content .hlist li dd:first-child:before, #content .hlist li dt:first-child:before, #content .hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}
#content .hlist dd dd:last-child:after, #content .hlist dd dt:last-child:after, #content .hlist dd li:last-child:after,
#content .hlist dt dd:last-child:after, #content .hlist dt dt:last-child:after, #content .hlist dt li:last-child:after,
#content .hlist li dd:last-child:after, #content .hlist li dt:last-child:after, #content .hlist li li:last-child:after {
    content: ") ";
    font-weight: normal;
}
/* Put ordinals in front of ordered list items */
#content .hlist ol {
    counter-reset: listitem;
}
#content .hlist ol > li {
    counter-increment: listitem;
}
#content .hlist ol > li:before {
    content: " " counter(listitem) " ";
    white-space: nowrap;
}
#content .hlist dd ol > li:first-child:before,
#content .hlist dt ol > li:first-child:before,
#content .hlist li ol > li:first-child:before {
    content: " (" counter(listitem) " ";
}

/* Неразрывные пробелы в горизонтальных списках */
.nowrap,
.nowraplinks a,
.nowraplinks .selflink,
.hlist-items-nowrap dd,
.hlist-items-nowrap dt,
.hlist-items-nowrap li {
    white-space: nowrap;
}

/* Но где-то неразрывность надо сбросить (например, в навшаблонах в узких местах) */
.wrap,
.wraplinks a,
.hlist-items-nowrap dl dl, .hlist-items-nowrap dl ol, .hlist-items-nowrap dl ul, /* Allow nested lists to wrap anyway */
.hlist-items-nowrap ol dl, .hlist-items-nowrap ol ol, .hlist-items-nowrap ol ul,
.hlist-items-nowrap ul dl, .hlist-items-nowrap ul ol, .hlist-items-nowrap ul ul {
    white-space: normal;
}

/* Disabling column-count for {{div col}}, {{reflist}} and {{refbegin}} */
.references-small {
    -moz-column-count: 1 !important;
    -webkit-column-count: 1 !important;
    column-count: 1 !important;
}

blockquote {
	quotes: '\00AB' '\00BB';
}

/* Блок ссылок на альтернативные сервисы рядом с координатами («HGЯО») */
.mw-body .geo-services {
	font-size: 82%;
}

.geo-services a > span {
	margin: 0.25em;
}

.geo-services > :first-child a > span {
	margin-left: 0.4em;
}

/* temporarily for [[Template:Карточка]] */
table.infobox td p {
	margin: 0 !important;
}

/* Таблицы наград в карточках */
.content table.infobox table td {
    width: initial;
    padding: initial;
}

/* small review notice */
#mw-fr-reviewnotice {
    color: #72777d;
    font-size: 0.8em;
    font-style: italic;
}

.mw-customtoggle-maps1 {
	display: none;
}

/* {{ref-info}} */
.ref-info {
	font-size: 85%;
	cursor: help;
	color: #72777d;
}

/* {{tl}} и аналоги */
.wp-templatelink {
	color: #9098a0;
}

/**
 * Фикс для отображения шаблонов Babel в мобильной версии
 * пока не добавят в расширение. Скопированно из расширения
 * плюс фикс из нашего MediaWiki:Common.css
 *
 * Stylesheet for Babel extension.
 *
 * You can override the CSS code on the MediaWiki:Common.css page
 * on your wiki to adjust colours etc.
 *
 * @file
 * @ingroup Extensions
 */

/* Babel wrapper layout. */
/* @noflip */table.mw-babel-wrapper {
  width: 238px !important;
  float: right;
  clear: right;
  margin: 0;
  background-color: #fff;
  border: 1px solid #99b3ff;
}

/* @noflip */.mw-content-ltr table.mw-babel-wrapper {
  float: right;
  clear: right;
}
/* @noflip */.mw-content-rtl table.mw-babel-wrapper {
  float: left;
  clear: left;
}

/* Babel box layout */
/* @noflip */div.mw-babel-box {
  margin: 1px;
}

/* @noflip */.mw-content-ltr table.mw-babel-box {
  float: left;
  clear: left;
}

/* @noflip */.mw-content-rtl table.mw-babel-box {
  float: right;
  clear: right;
}

div.mw-babel-box table {
  width: 238px;
}

div.mw-babel-box table th {
  width: 45px;
  height: 45px;
  font-size: 14pt;
  font-family: sans-serif;
}

div.mw-babel-box table td {
  font-size: 8pt;
  padding: 4pt;
  line-height: 1.25em;
}

/* Babel box colours. */
div.mw-babel-box-0 {
  border: 1px solid #fbb;
}

div.mw-babel-box-1 {
  border: 1px solid #e0c0e0;
}

div.mw-babel-box-2 {
  border: 1px solid #bcb9ef;
}

div.mw-babel-box-3 {
  border: 1px solid #99b3ff;
}

div.mw-babel-box-4 {
  border: 1px solid #77e0e8;
}

div.mw-babel-box-5 {
  border: 1px solid #ffcf4d;
}

div.mw-babel-box-N {
  border: 1px solid #6ef7a7;
}

div.mw-babel-box-0 table th {
  background-color: #fbb;
}

div.mw-babel-box-1 table th {
  background-color: #e0c0e0;
}

div.mw-babel-box-2 table th {
  background-color: #bcb9ef;
}

div.mw-babel-box-3 table th {
  background-color: #99b3ff;
}

div.mw-babel-box-4 table th {
  background-color: #77e0e8;
}

div.mw-babel-box-5 table th {
  background-color: #ffcf4d;
}

div.mw-babel-box-N table th {
  background-color: #6ef7a7;
}

div.mw-babel-box-0 table {
  background-color: #fee;
}

div.mw-babel-box-1 table {
  background-color: #f3e0f3;
}

div.mw-babel-box-2 table {
  background-color: #e9e5f9;
}

div.mw-babel-box-3 table {
  background-color: #e0e8ff;
}

div.mw-babel-box-4 table {
  background-color: #d0f8ff;
}

div.mw-babel-box-5 table {
  background-color: #ffefa6;
}

div.mw-babel-box-N table {
  background-color: #c5fcdc;
}

/* header and footer */
.mw.babel-box th.mw-babel-header {
  text-align: center;
  font-weight: bold;
}

.mw.babel-box th.mw-babel-footer {
  text-align: center;
  font-weight: normal;
}

/* Скрытие буквы N у родных языков, по аналогии со стандарными шаблонами */
.mw-babel-box-level-N  {
        display: none;
}

/* ================================================
   СТРАНИЦЫ
   ================================================ */

/* [[Заглавная страница]] ------------------------- */

@media (max-width: 719px) {
	.page-Заглавная_страница #content {
		background-color:#eaecf0;
	}
	.page-Заглавная_страница .header-container.header-chrome {
		box-shadow:none; 
	}
}

/*
 * Костыли-префиксы для поддержки устаревших браузеров заглавной страницей
 * Будут переведены на TemplateStyles, см. [[phab:T162379]]
*/
.main-top-right > ul {
	display: -webkit-box;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
}

.main-featuredLists > .main-featuredLists-item {
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-webkit-column-break-inside: avoid;
	display: -webkit-box;
	display: -webkit-flex;
}

.main-featuredLists-item > img {
	-webkit-box-flex: 0;
	-webkit-flex: 0 auto;
}

.main-footer {
	display: -webkit-box;
	display: -webkit-flex;
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
}

.main-footer-actions {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
}

.main-footer-actions > ul {
	-webkit-box-align: center;
	-webkit-align-items: center;
	display: -webkit-box;
	display: -webkit-flex;
}

.main-footer-menu {
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	display: -webkit-box;
	display: -webkit-flex;
}

.main-footer-menuToggle {
	-webkit-box-align: center;
	-webkit-align-items: center;
	display: -webkit-box;
	display: -webkit-flex;
}

.main-wikimedia-list {
	-webkit-column-count: 4;
	-webkit-column-width: 15em;
}

.main-wikimedia-list > .main-wikimedia-listItem {
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-webkit-column-break-inside: avoid;
	display: -webkit-box;
	display: -webkit-flex;
}

.main-wikimedia-listItem > img {
	-webkit-box-flex: 0;
	-webkit-flex: 0 auto;
}

.main-wikimedia-listItem > a {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
}

@media (max-width: 719px) {
	.main-wikimedia-list {
		-webkit-column-width: 10em;
	}
}

@media (min-width: 1000px) {
	.main-wrapper {
		display: -webkit-box;
		display: -webkit-flex;
	}

	.main-wrapper-column {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
	}

	.main-top {
		-webkit-box-align: center;
		-webkit-align-items: center;
		display: -webkit-box;
		display: -webkit-flex;
	}

	.main-top-left {
		background-image: -webkit-linear-gradient(left, #f8f9fa 0%, #f8f9fa 70%, rgba(248, 249, 250, 0) 100%);
		-webkit-box-flex: 3;
		-webkit-flex: 3;
	}
	
	.main-top-right {
		-webkit-box-flex: 2;
		-webkit-flex: 2;
	}

	.main-top-right > ul {
		-webkit-box-align: center;
		-webkit-align-items: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-webkit-flex-direction: row-reverse;
		-webkit-box-pack: left;
		-webkit-justify-content: left;
	}
}