MediaWiki:Mobile.css — различия между версиями

Материал из Enduro.team
Перейти к: навигация, поиск
Строка 17: Строка 17:
 
float: none !important;
 
float: none !important;
 
width: 100% !important;
 
width: 100% !important;
−
}
 
−
 
−
/* Стили для заглавной страницы */
 
−
@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;
 
−
}
 
 
}
 
}

Версия 16:18, 4 февраля 2019

/**
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
* Group common CSS rules together where possible.
*/


/* Mobile template hacks (see phab T56176) If you are looking for the following, please update your template to use TemplateStyles: */
.mobile-float-reset {
	float: none !important;
	width: 100% !important;
}