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

Материал из Enduro.team
Перейти к: навигация, поиск
Строка 1: Строка 1:
/**
 
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 {
 
.mobile-float-reset {
 
float: center !important;
 
float: center !important;
Строка 19: Строка 4:
 
}
 
}
  
/* Стили для заглавной страницы */
 
 
@media (max-width: 719px) {
 
@media (max-width: 719px) {
 
 
Строка 28: Строка 12:
 
}
 
}
  
/*
 
* Костыли-префиксы для поддержки устаревших браузеров заглавной страницей
 
* Будут переведены на TemplateStyles, см. [[phab:T162379]]
 
*/
 
 
.main-top-right > ul {
 
.main-top-right > ul {
 
display: -webkit-box;
 
display: -webkit-box;
Строка 109: Строка 89:
 
@media (max-width: 719px) {
 
@media (max-width: 719px) {
 
.main-wikimedia-list {
 
.main-wikimedia-list {
-webkit-column-width: 10em;
+
-webkit-column-width: 10em;
}
+
}
 
}
 
}
  
 
@media (min-width: 1000px) {
 
@media (min-width: 1000px) {
 
.main-wrapper {
 
.main-wrapper {
display: -webkit-box;
+
display: -webkit-box;
display: -webkit-flex;
+
display: -webkit-flex;
}
+
}
  
.main-wrapper-column {
+
.main-wrapper-column {
-webkit-box-flex: 1;
+
-webkit-box-flex: 1;
-webkit-flex: 1;
+
-webkit-flex: 1;
}
+
}
  
.main-top {
+
.main-top {
-webkit-box-align: center;
+
-webkit-box-align: center;
-webkit-align-items: center;
+
-webkit-align-items: center;
display: -webkit-box;
+
display: -webkit-box;
display: -webkit-flex;
+
display: -webkit-flex;
}
+
}
  
.main-top-left {
+
.main-top-left {
background-image: -webkit-linear-gradient(left, #f8f9fa 0%, #f8f9fa 70%, rgba(248, 249, 250, 0) 100%);
+
background-image: -webkit-linear-gradient(left, #f8f9fa 0%, #f8f9fa 70%, rgba(248, 249, 250, 0) 100%);
-webkit-box-flex: 3;
+
-webkit-box-flex: 3;
-webkit-flex: 3;
+
-webkit-flex: 3;
}
+
}
 
 
.main-top-right {
+
.main-top-right {
-webkit-box-flex: 2;
+
-webkit-box-flex: 2;
-webkit-flex: 2;
+
-webkit-flex: 2;
}
+
}
  
.main-top-right > ul {
+
.main-top-right > ul {
-webkit-box-align: center;
+
-webkit-box-align: center;
-webkit-align-items: center;
+
-webkit-align-items: center;
-webkit-box-orient: horizontal;
+
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
+
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
+
-webkit-flex-direction: row-reverse;
-webkit-box-pack: left;
+
-webkit-box-pack: left;
-webkit-justify-content: left;
+
-webkit-justify-content: left;
}
+
}
  
a.goog-logo-link img {
+
a.goog-logo-link img {
display: none;
+
display: none;
}
+
}
.goog-te-combo {
+
.goog-te-combo {
 
width: 50%;
 
width: 50%;
}
+
}
.goog-te-banner-frame {
+
.goog-te-banner-frame {
width: 50%;
+
width: 50%;
}
+
}

Версия 18:49, 9 марта 2019

.mobile-float-reset {
	float: center !important;
	width: 100% !important;
}

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

.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;
}

a.goog-logo-link img {
		display: none;
}
.goog-te-combo {
		 width: 50%;
}
.goog-te-banner-frame {
		width: 50%;
}