Шаблон:Футбольная форма/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 1.40+ выводит вместо картинки
* <span typeof="mw:Error mw:File"><a class="new">…</a></span>.
* Красную ссылку прячем, а обёртку-ошибку превращаем в заглушку:
* - в слое узора — штриховка поверх основного цвета;
* - в слое маски — запасная маска на CSS: белое поле с вырезанным силуэтом и контуром,
* так что форма видна даже на вики без файлов с Commons. */
.fkit-layer .new {
display: none;
}
.fkit-layer [typeof~="mw:Error"] {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Узор: штриховка. Чтобы вместо неё был просто основной цвет, удалите это правило. */
.fkit-layer--pattern [typeof~="mw:Error"] {
background-image: repeating-linear-gradient(
45deg,
rgba( 0, 0, 0, 0.3 ),
rgba( 0, 0, 0, 0.3 ) 1px,
transparent 1px,
transparent 5px
);
}
/* Маска: белое поле рисует ::before (его обрезает clip-path),
контур — тень от этого поля (filter стоит на родителе, иначе тень тоже обрежется).
Поле выходит на 2px за часть, чтобы его края не давали полос: лишнее срезает overflow. */
.fkit-layer--mask [typeof~="mw:Error"] {
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
width: auto;
height: auto;
filter: drop-shadow( 0 0 0.6px #202122 ) drop-shadow( 0 0 0.3px #202122 );
}
.fkit-layer--mask [typeof~="mw:Error"]::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: #fff;
}
/* Силуэты запасной маски: белая область вокруг формы.
Координаты в px от угла поля, то есть на 2px больше, чем внутри части.
evenodd — у трусов и гетр силуэт вырезан в поле «дыркой». */
.fkit-part--leftarm .fkit-layer--mask [typeof~="mw:Error"]::before {
clip-path: polygon( 0 0, 35px 0, 35px 1px, 13px 23px, 25px 36px, 32px 30px, 32px 63px, 0 63px );
}
.fkit-part--body .fkit-layer--mask [typeof~="mw:Error"]::before {
clip-path: polygon( 0 0, 42px 0, 42px 3px, 40px 3px, 30.5px 6px, 21px 7px, 11.5px 6px, 2px 3px, 0 3px );
}
.fkit-part--rightarm .fkit-layer--mask [typeof~="mw:Error"]::before {
clip-path: polygon( 35px 0, 0 0, 0 1px, 22px 23px, 10px 36px, 3px 30px, 3px 63px, 35px 63px );
}
.fkit-part--shorts .fkit-layer--mask [typeof~="mw:Error"]::before {
clip-path: polygon( evenodd, 0 0, 104px 0, 104px 40px, 0 40px, 0 0,
32px 2px, 28px 37px, 47px 37px, 52px 26px, 57px 37px, 76px 37px, 72px 2px, 32px 2px, 0 0 );
}
.fkit-part--socks .fkit-layer--mask [typeof~="mw:Error"]::before {
clip-path: polygon( evenodd, 0 0, 104px 0, 104px 44px, 0 44px, 0 0,
32px 8px, 47px 8px, 46px 41px, 33px 41px, 32px 8px, 0 0,
57px 8px, 72px 8px, 71px 41px, 58px 41px, 57px 8px, 0 0 );
}
/* ---------- 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;
}
}