Перейти к содержанию

Шаблон:Футбольная форма/styles.css: различия между версиями

(Показать все непроверенные изменения)
[досмотренная версия][ожидает проверки]
Новая страница: «/** * Шаблон:Футбольная форма/styles.css (модель содержимого: sanitized-css) * * Только внешний вид шаблона {{Футбольная форма}} — логики здесь нет. * Разметку выводят подшаблоны /раскладка и /часть: * * div.fkit [.fkit--<тема>] [.fkit--no-shorts] [.fkit--no-socks] * div.fkit-figure[role=img] рису...»
 
Bot (обсуждение | вклад)
5488 правок
Узоры на мобильной версии: размеры картинки с !important (MobileFrontend ставит inline-размеры)
 
(не показана 1 промежуточная версия 1 участника)
Строка 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;
}
}


/* ---------- 5. Нет файла ----------
/* ---------- 5. Нет файла ----------
  * Если файла нет, MediaWiki выводит вместо картинки красную ссылку (a.new).
  * Если файла нет, MediaWiki 1.40+ выводит вместо картинки
  * Для узора превращаем её в штриховку-заглушку поверх основного цвета.
* <span typeof="mw:Error mw:File"><a class="new">…</a></span>.
  * Чтобы вместо штриховки был просто основной цвет, замените блок на display: none. */
  * Красную ссылку прячем, а обёртку-ошибку превращаем в заглушку:
*  - в слое узора — штриховка поверх основного цвета;
  *   - в слое маски — запасная маска на CSS: белое поле с вырезанным силуэтом и контуром,
*    так что форма видна даже на вики без файлов с Commons. */
 
.fkit-layer .new {
display: none;
}


.fkit-layer--pattern .new {
.fkit-layer [typeof~="mw:Error"] {
display: block;
display: block;
position: absolute;
position: absolute;
Строка 86: Строка 99:
width: 100%;
width: 100%;
height: 100%;
height: 100%;
}
/* Узор: штриховка. Чтобы вместо неё был просто основной цвет, удалите это правило. */
.fkit-layer--pattern [typeof~="mw:Error"] {
background-image: repeating-linear-gradient(
background-image: repeating-linear-gradient(
45deg,
45deg,
Строка 95: Строка 112:
}
}


/* Нет файла маски: часть остаётся цветным прямоугольником без контура */
/* Маска: белое поле рисует ::before (его обрезает clip-path),
.fkit-layer--mask .new {
  контур — тень от этого поля (filter стоит на родителе, иначе тень тоже обрежется).
display: none;
  Поле выходит на 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 );
}
}


Источник — https://narofootball.ru/wiki/Шаблон:Футбольная_форма/styles.css