Шаблон:Футбольная форма/styles.css - История изменений

Bot: Узоры на мобильной версии: размеры картинки с !important (MobileFrontend ставит inline-размеры)

2026-11-11T14:35:03Z

Узоры на мобильной версии: размеры картинки с !important (MobileFrontend ставит inline-размеры)

← Предыдущая версия		Версия от 14:35, 11 ноября 2026
Строка 67:		Строка 67:
	}		}

	.fkit-layer img {		/* !important нужен для мобильной версии: MobileFrontend при отложенной загрузке
			переносит в img inline-размеры файла (style="width:152px;height:236px"),
			и без !important узор крупнее части показывался бы в натуральную величину —
			виден был бы только его левый верхний угол.
			.lazy-image-placeholder — заглушка MobileFrontend до загрузки картинки. */
			.fkit-layer img,
			.fkit-layer .lazy-image-placeholder {
	display: block;		display: block;
	width: 100%;		width: 100% !important;
	height: 100%;		height: 100% !important;
	max-width: none;		max-width: none;
	}		}

Andrew в 18:35, 28 сентября 2026

2026-09-28T18:35:43Z

@@ Строка 75: / Строка 75: @@
 /* ---------- 5. Нет файла ----------
-  * Если файла нет, MediaWiki выводит вместо картинки красную ссылку (a.new).
+  * Если файла нет, MediaWiki 1.40+ выводит вместо картинки
-  * Для узора превращаем её в штриховку-заглушку поверх основного цвета.
+ * <span typeof="mw:Error mw:File"><a class="new">…</a></span>.
-  * Чтобы вместо штриховки был просто основной цвет, замените блок на display: none. */
+  * Красную ссылку прячем, а обёртку-ошибку превращаем в заглушку:
-.fkit-layer--pattern .new {
+.fkit-layer .new {
 	display: block;
 	position: absolute;
@@ Строка 86: / Строка 93: @@
 	width: 100%;
 	height: 100%;
 	background-image: repeating-linear-gradient(
 deg,
@@ Строка 95: / Строка 106: @@
+}
-/* Нет файла маски: часть остаётся цветным прямоугольником без контура */
+/* Маска: белое поле рисует ::before (его обрезает clip-path),
-.fkit-layer--mask .new {
+   контур — тень от этого поля (filter стоит на родителе, иначе тень тоже обрежется).
-	display: none;
+   Поле выходит на 2px за часть, чтобы его края не давали полос: лишнее срезает overflow. */
+}

Andrew: Новая страница: «/** * Шаблон:Футбольная форма/styles.css (модель содержимого: sanitized-css) * * Только внешний вид шаблона {{Футбольная форма}} — логики здесь нет. * Разметку выводят подшаблоны /раскладка и /часть: * * div.fkit [.fkit--<тема>] [.fkit--no-shorts] [.fkit--no-socks] * div.fkit-figure[role=img] рису...»

2026-09-28T18:11:22Z

Новая страница: «/** * Шаблон:Футбольная форма/styles.css (модель содержимого: sanitized-css) * * Только внешний вид шаблона {{Футбольная форма}} — логики здесь нет. * Разметку выводят подшаблоны /раскладка и /часть: * * div.fkit [.fkit--<тема>] [.fkit--no-shorts] [.fkit--no-socks] * div.fkit-figure[role=img] рису...»

Новая страница

/**
* Шаблон:Футбольная форма/styles.css (модель содержимого: sanitized-css)
*
* Только внешний вид шаблона {{Футбольная форма}} — логики здесь нет.
* Разметку выводят подшаблоны /раскладка и /часть:
*
* div.fkit [.fkit--<тема>] [.fkit--no-shorts] [.fkit--no-socks]
* div.fkit-figure[role=img] рисунок: CSS-сетка из частей
* div.fkit-part.fkit-part--body часть; её цвет задан inline (background-color)
* div.fkit-layer--pattern слой узора (есть, только если узор задан)
* div.fkit-layer--mask слой маски: белая вне силуэта, контур
* div.fkit-warning предупреждение (только в предпросмотре)
* div.fkit-caption подпись (параметр title)
*/

/* ---------- 1. Контейнер ---------- */

.fkit {
display: table; /* ширина по содержимому */
margin: 0 auto 0.5em; /* по центру */
text-align: center;
line-height: 1.3;
}

/* ---------- 2. Рисунок: сетка частей ----------
* Колонки — ширины рукавов и футболки, высоты строк задают сами части.
* Скрытые части (трусы/гетры = нет) не выводятся, их строка схлопывается.
* Новая часть = новое имя в grid-template-areas + правило .fkit-part--<имя>. */

.fkit-figure {
display: grid;
grid-template-columns: 31px 38px 31px;
grid-template-areas:
"leftarm body rightarm"
"shorts shorts shorts"
"socks socks socks";
width: max-content;
margin: 0 auto;
}

/* ---------- 3. Части ---------- */

.fkit-part {
position: relative;
overflow: hidden;
background-color: #fff; /* нейтральный цвет, если цвет части не задан */
}

.fkit-part--leftarm { grid-area: leftarm; height: 59px; }
.fkit-part--body { grid-area: body; height: 59px; }
.fkit-part--rightarm { grid-area: rightarm; height: 59px; }
.fkit-part--shorts { grid-area: shorts; height: 36px; }
.fkit-part--socks { grid-area: socks; height: 40px; }

/* ---------- 4. Слои внутри части ----------
* Снизу вверх: цвет части -> узор -> маска (контур и белое поле вокруг силуэта).
* Картинки растягиваются по размеру части, поэтому геометрия задаётся только здесь. */

.fkit-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0; /* текст вместо отсутствующей картинки не показываем */
line-height: 0;
}

.fkit-layer img {
display: block;
width: 100%;
height: 100%;
max-width: none;
}

/* ---------- 5. Нет файла ----------
* Если файла нет, MediaWiki выводит вместо картинки красную ссылку (a.new).
* Для узора превращаем её в штриховку-заглушку поверх основного цвета.
* Чтобы вместо штриховки был просто основной цвет, замените блок на display: none. */

.fkit-layer--pattern .new {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(
45deg,
rgba( 0, 0, 0, 0.3 ),
rgba( 0, 0, 0, 0.3 ) 1px,
transparent 1px,
transparent 5px
);
}

/* Нет файла маски: часть остаётся цветным прямоугольником без контура */
.fkit-layer--mask .new {
display: none;
}

/* ---------- 6. Предупреждения (выводятся только в предпросмотре) ---------- */

.fkit-warning {
grid-column: 1 / -1; /* во всю ширину, под частями */
margin-top: 4px;
color: #d33;
font-size: 11px;
line-height: 1.25;
text-align: left;
overflow-wrap: break-word;
}

/* ---------- 7. Подпись ---------- */

.fkit-caption {
padding-top: 0.4em;
font-weight: bold;
}

/* ---------- 8. Темы: |тема=<имя> добавляет класс .fkit--<имя> ----------
* Новая тема — это новый блок правил здесь; шаблон менять не нужно.
* Классы .fkit--no-shorts и .fkit--no-socks можно использовать в темах как «крючки». */

/* inline — несколько форм в ряд (основная, гостевая, резервная) */
.fkit--inline {
display: inline-table;
margin: 0 0.5em 0.5em;
vertical-align: top;
}

/* gallery — плитки одинаковой ширины, как в истории форм клуба */
.fkit--gallery {
display: inline-table;
width: 10em;
margin: 0 0 1em;
vertical-align: top;
}

/* card — форма на карточке с рамкой (фон белый: маски белые вне силуэта) */
.fkit--card {
padding: 0.5em 0.75em;
border: 1px solid #a2a9b1;
border-radius: 2px;
background-color: #fff;
color: #202122;
}

/* ---------- 9. Тёмная тема (Vector 2022, MediaWiki 1.43+) ----------
* Маски белые вне силуэта, поэтому в тёмной теме кладём рисунок на белую подложку.
* Если версия MediaWiki старше и стиль не сохраняется из-за этих селекторов, удалите блок. */

@media screen {
html.skin-theme-clientpref-night .fkit-figure {
background-color: #fff;
box-shadow: 0 0 0 4px #fff;
border-radius: 2px;
}
}

@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os .fkit-figure {
background-color: #fff;
box-shadow: 0 0 0 4px #fff;
border-radius: 2px;
}
}