Шаблон:Кубковая сетка/styles.css
Перейти к навигации
Перейти к поиску
/*
* Шаблон:Кубковая сетка/styles.css
* ---------------------------------------------------------------------------
* Основные стили турнирной сетки и сводной таблицы (TemplateStyles,
* модель содержимого sanitized-css). Разметку создаёт Модуль:Кубковая сетка.
*
* Дерево классов:
* .cb корень (+ .cb--theme-<имя>, data-stages="N")
* .cb-title заголовок (title=)
* .cb-scroll > .cb-grid прокручиваемая обёртка и CSS Grid сетки
* .cb-head заголовок этапа (строка 1)
* .cb-item матч: .cb-caption + .cb-match
* .cb-team строка команды: .cb-name (.cb-flag, .cb-label,
* .cb-suffix) + .cb-score
* .cb-conn соединитель: .cb-conn-out, .cb-conn-in
* .cb-extras > .cb-extra доп. матчи (за 3-е место): .cb-extra-head + .cb-item
* .cb-summary-wrap > table.cb-summary сводная таблица
* .cb-warnings сообщения об ошибках в данных
*
* Как оформлять под свою вики:
* • цвета — в конце каждого раздела; для тёмной темы их перекрывает
* tokens.css (там же подключены токены дизайн-системы Codex);
* • размеры — только в em: весь блок масштабируется одним font-size у .cb;
* • темы — отдельные страницы theme-<имя>.css с селекторами .cb--theme-<имя>
* (см. theme-compact.css), подключаются параметром theme=<имя>;
* • разовые правки — классы class=, sK_class=, sKmJ_class= и своя таблица
* стилей в параметре styles=.
*
* Ограничения санитайзера (css-sanitizer): объявлять custom properties
* (--x: …) нельзя, var() допустим лишь в «одноцветных» свойствах и только
* в новых версиях. Поэтому здесь нет ни var(), ни переменных — только
* обычные значения, а числа, от которых зависит геометрия, описаны ниже.
*/
/* ===== 1. Контейнер ===================================================== */
.cb {
font-size: 90%;
line-height: 1.4;
margin: 0.5em 0 1em;
max-width: 100%;
}
.cb-title {
font-weight: bold;
font-size: 115%;
margin-bottom: 0.6em;
}
/* Широкая сетка прокручивается сама, не растягивая страницу (мобильные). */
.cb-scroll {
overflow-x: auto;
overflow-y: hidden;
max-width: 100%;
padding-bottom: 0.3em;
}
/* ===== 2. Каркас сетки ===================================================
* Колонки 1, 3, 5… — этапы; 2, 4, 6… — соединительные линии.
* Строка 1 — заголовки; дальше R = 2^(N-1) одинаковых строк-«слотов»:
* их высоту задают матчи первого этапа (каждый занимает ровно одну строку),
* а матч этапа K растягивается на 2^(K-1) строк и центрируется в них.
* Координаты (grid-row / grid-column) модуль пишет в style="" каждого блока.
*/
.cb-grid {
display: inline-grid;
align-items: center;
vertical-align: top;
}
/* Одинаковая ширина всех колонок этапов (как в образце): 1fr в сетке
* с шириной «по содержимому» растягивает все такие колонки до самой широкой.
* auto — колонки линий. Строк по одной на каждое допустимое число этапов
* (атрибут data-stages ставит модуль). Уберите этот блок — и каждая колонка
* будет шириной по своему содержимому. Новый предел CFG.maxStages в модуле =
* ещё одна строка по тому же образцу. */
.cb[data-stages="2"] .cb-grid { grid-template-columns: 1fr auto 1fr; }
.cb[data-stages="3"] .cb-grid { grid-template-columns: 1fr auto 1fr auto 1fr; }
.cb[data-stages="4"] .cb-grid { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
.cb[data-stages="5"] .cb-grid { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; }
.cb[data-stages="6"] .cb-grid { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr; }
.cb[data-stages="7"] .cb-grid { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr; }
/* ===== 3. Геометрия матча (ВАЖНО для линий) ==============================
* Каждый .cb-item — это стопка из трёх частей одинаковой высоты у всех матчей:
* подпись C = 1.6em (.cb-caption)
* рамка B = 2 × 1.7em − 1px (две строки .cb-team с общей границей)
* отступ G = 0.4em (padding-bottom у .cb-item)
* Блок центрирован в своей области, поэтому центр рамки ниже центра области на
* D = (C − G) / 2 = (1.6 − 0.4) / 2 = 0.6em.
* Это число D используется в разделе 7 (соединители). Изменили высоту
* подписи или отступ — пересчитайте D и поправьте там все «0.6em».
* Высота рамки B на D не влияет, её можно менять свободно.
*/
.cb-item {
min-width: 13em;
max-width: 20em;
padding-bottom: 0.4em; /* G */
}
.cb-caption {
height: 1.6em; /* C */
line-height: 1.6em;
padding: 0 0.2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* длинная подпись обрезается многоточием */
}
/* ===== 4. Заголовки этапов ============================================= */
.cb-head {
align-self: end;
margin-bottom: 0.8em;
padding: 0.15em 0.5em;
border: 1px solid #a2a9b1;
background-color: #eaecf0;
color: #202122;
text-align: center;
}
/* ===== 5. Матч: строки команд, флаги, счёт ============================== */
.cb-team {
display: flex;
height: 1.7em;
}
.cb-team + .cb-team {
margin-top: -1px; /* общая граница между строками */
}
.cb-name,
.cb-score {
box-sizing: border-box;
line-height: calc(1.7em - 2px);
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
color: #202122;
white-space: nowrap;
}
.cb-name {
flex: 1 1 auto;
min-width: 0;
padding: 0 0.4em;
overflow: hidden;
text-overflow: ellipsis;
}
.cb-score {
flex: 0 0 3.2em;
margin-left: -1px; /* общая граница с ячейкой названия */
padding: 0 0.2em;
text-align: center;
}
.cb-flag {
margin-right: 0.35em;
}
.cb-flag img {
vertical-align: middle;
}
/* в сводке флаг отделён от имени неразрывным пробелом */
.cb-summary .cb-flag {
margin-right: 0;
}
/* «(пен.)», «(доп. вр.)» у победителя — обычным шрифтом, как в образце */
.cb-suffix {
font-weight: normal;
}
/* ===== 6. Состояния ======================================================
* Классы ставит модуль; ненужное состояние можно просто не оформлять.
*/
/* победитель матча — полужирным */
.cb-team--winner .cb-label,
.cb-team--winner .cb-score {
font-weight: bold;
}
/* проигравший — по умолчанию без выделения; пример: приглушить
.cb-team--loser .cb-label { color: #54595d; }
*/
/* команда ещё не определена — пустая строка той же высоты; пример выделения:
.cb-team--tbd .cb-name { background-color: #fff; }
*/
/* команда подставлена автоматически (из предыдущего раунда) — без выделения;
пример: .cb-team--auto .cb-label { font-style: italic; } */
/* хозяин поля (home=1|2) — по умолчанию незаметен; пример цветного маркера:
.cb-team--home .cb-name { box-shadow: inset 3px 0 0 #36c; }
*/
/* скрытый слот (hide=да, hide_empty=да): место сохраняется, линии не рисуются */
.cb-item--hidden {
visibility: hidden;
}
/* статусы матча: .cb-status-scheduled | live | finished | postponed | cancelled */
.cb-status-live .cb-match {
box-shadow: 0 0 0 2px #d73333;
}
.cb-status-postponed .cb-match,
.cb-status-cancelled .cb-match {
opacity: 0.6;
}
.cb-status-cancelled .cb-label {
text-decoration: line-through;
}
/* ===== 7. Соединительные линии ===========================================
* Соединитель .cb-conn занимает ту же область строк, что и его матч, но
* в соседней колонке; внутри — абсолютно позиционированные линии (рамки 2px).
*
* верхний предок (.cb-conn--top) нижний предок (.cb-conn--bottom)
* ────┐ ← центр рамки: 50% + D ┌ .cb-conn-in (если верхний скрыт)
* │ │
* │ ───┘ ← центр рамки: 50% + D снизу вверх
* ├── .cb-conn-in: вход в матч следующего этапа, его центр —
* на границе областей предков + D
*
* «− 1px» везде центрирует линию толщиной 2px на нужной высоте.
* D = 0.6em (см. раздел 3).
*/
.cb-conn {
position: relative;
align-self: stretch;
width: 1.6em;
}
.cb-conn-out,
.cb-conn-in {
position: absolute;
box-sizing: border-box;
border: 0 solid #202122;
}
.cb-conn--top .cb-conn-out {
top: calc(50% + 0.6em - 1px);
bottom: calc(-0.6em - 1px);
left: 0;
right: calc(50% - 1px);
border-top-width: 2px;
border-right-width: 2px;
}
.cb-conn--bottom .cb-conn-out {
top: calc(0.6em - 1px);
bottom: calc(50% - 0.6em - 1px);
left: 0;
right: calc(50% - 1px);
border-bottom-width: 2px;
border-right-width: 2px;
}
.cb-conn-in {
left: 50%;
right: 0;
height: 0;
border-top-width: 2px;
}
.cb-conn--top .cb-conn-in {
top: calc(100% + 0.6em - 1px);
}
.cb-conn--bottom .cb-conn-in {
top: calc(0.6em - 1px);
}
/* ===== 8. Дополнительные матчи (за 3-е место и т. п.) =================== */
.cb-extras {
align-self: center;
}
.cb-extra + .cb-extra {
margin-top: 1em;
}
.cb-extra-head {
margin-bottom: 0.3em;
}
/* ===== 9. Сводная таблица ================================================
* Колонки: дата/время | команда 1 | счёт | команда 2 | место, зрители, судья.
* Строка раздела — .cb-s-stage, матч — .cb-s-row (+ .cb-status-*),
* серия пенальти со списками бьющих — отдельная строка .cb-s-shootout.
*/
.cb-summary-wrap {
overflow-x: auto;
max-width: 100%;
margin-top: 1.2em;
}
.cb-summary {
width: 100%;
min-width: 44em; /* на узком экране — прокрутка, а не «гармошка» */
border-collapse: collapse;
}
.cb-summary caption {
text-align: left;
font-weight: bold;
font-size: 115%;
padding-bottom: 0.3em;
}
.cb-s-stage th {
text-align: left;
font-size: 115%;
padding: 1em 0 0.3em;
border-bottom: 1px solid #a2a9b1;
}
.cb-summary td {
vertical-align: top;
padding: 0.6em 0.5em;
border-bottom: 1px solid #c8ccd1;
}
/* строка матча и строка его серии пенальти читаются как одно целое */
.cb-summary .cb-s-row--with-shootout td {
border-bottom: 0;
padding-bottom: 0.2em;
}
.cb-summary .cb-s-shootout td {
padding-top: 0.2em;
font-size: 90%;
}
.cb-s-when {
width: 12%;
text-align: right;
white-space: nowrap;
}
.cb-s-team1 {
width: 22%;
text-align: right;
}
.cb-s-team2 {
width: 22%;
text-align: left;
}
.cb-s-result {
width: 12%;
text-align: center;
white-space: nowrap;
}
.cb-s-info {
width: 32%;
font-size: 90%;
}
.cb-s-name,
.cb-s-score,
.cb-s-shootout-title {
font-weight: bold;
font-size: 110%;
}
.cb-s-goals,
.cb-s-pens,
.cb-s-report,
.cb-s-status {
font-size: 88%;
}
.cb-s-status {
font-style: italic;
color: #54595d;
}
/* ===== 10. Предупреждения =============================================== */
.cb-warnings {
margin-top: 0.5em;
font-size: 90%;
}
/* ===== 11. Узкие экраны и печать ======================================== */
@media screen and (max-width: 640px) {
.cb {
font-size: 80%; /* вся геометрия в em — линии не «поедут» */
}
}
@media print {
.cb-scroll,
.cb-summary-wrap {
overflow: visible;
}
}