Шаблон:Футбольная форма/styles.css

/**
 * Шаблон:Футбольная форма/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;
	}
}